Tagged: wordpress

Gravity Forms – Collecting Select Box Value

Gravity Forms for WordPress has a select box field type, which by default uses the same data for both value and label. The field can easily be configured to have separate value and label attributes, however only the label will be sent in the form notification. In many cases this is fine, but sometimes you need the <option> value data to be sent as well as the display label.

Alternative Option: Capturing Checkbox Values

Capture the Value Attribute in a Hidden Field

One solution is to use JavaScript to capture the <select> field’s value, and copy it to a hidden form field which can be included in the email notification.

We’ll use a bit of custom JavaScript to listen to the <select> change event and update our hidden form field. This example code uses specific field ids that Gravity Forms generates. You could also write more general JS and selectors to match more scenarios if your site has multiple forms.

The Form Setup

At minimum we’ll need a select input (drop down) and a hidden field. For this demo our hidden field is actually plain text so we can see what’s happening.

Demo Product Form

  • Choose a product...
  • ...we'll grab the select option value here

Here’s the JavaScript. This example matches the IDs in the demo form. You’ll need to change those selectors to suit your form.

/**
* Wrap our JS for capturing values
*/
var selectHandler = {

	// Setup & Event listener
	// ----------------------
	init: function() {
		
		var select = jQuery('#input_3_1')[0]; //change id to match your form
		if(typeof select === 'undefined' || !select) {
			return;
		}
		
		//Set Initial Value (before change)
		selectHandler.setEmail.apply( {value: select.value} );
		
		jQuery(select).on('change', this.setEmail);
	},
	
	// Set text (or hidden) field to option value
	// (change selector to match your form)
	// ------------------------------------
	setEmail: function(ev) {
		 jQuery('#input_3_2')[0].value = this.value;
	}
};
jQuery().ready( selectHandler.init() );

If you are using a child theme or custom theme you can add this code to its JavaScript file.
Otherwise use WordPress’ wp_register_script and wp_enqueue_script functions to load a new file.
The value of the hidden/text box can then be included in your Gravity Forms notification.

WordPress Debugging

Bronson Quick spoke at the WordCamp Sunshine Coast today on debugging for WordPress. He covered techniques for fixing a white-screen of death as well as getting detailed information to sort out squirrelly bugs and performance issues.

Firstly WordPress has a few rad constants you can switch on to get better information about where things are breaking.

define( 'WP_DEBUG', true );     //I was blind, now I can see (my PHP errors)
define( 'WP_DEBUG_LOG', true ); //for production, write logs to wp-content
define( 'SCRIPT_DEBUG', true ); //use non-minified versions of core CSS/JS
define( 'SAVEQUERIES', true );  //log queries, look for suspicious ones. Not for production

Local Development

Develop in an environment close to the production hosting environment your site will be deployed to. The best way to do this is with virtual machines and tools like Vagrant.

Chassis is a WordPress focused VM for Vagrant. It’s configured with Nginx, MySQL, PHP 5.4 – 5.6 and has a bunch of handy extensions available to set up things like Xdebug, Debug Bar and Query Monitor quickly. The disposable nature of VMs means you can create one for each project.

Creating a Chassis VM

git clone git@github.com:Chassis/Chassis.git myproject
cd myproject
vagrant up

Chassis Extensions

Debug Bar gives you a lot of insight into what WordPress is doing to generate a page.

cd myproject/extensions
git clone https://github.com/Chassis/Debugging.git
vagrant provision

This will install a collection of Debug Bar plugins into WordPress en mass. What a time saver.

Query Monitor is an alternative tool for monitoring database activity in WordPress. It does more than monitoring SQL and can even show script dependencies, en queued styles and highlight errors.

So…

  • Develop in an environment similar to where you’ll deploy. Let Chassis set that up for you.
  • Use Xdebug, Debug Bar and Query Monitor as necessary to get insight into what your code is doing

WordPress Backups to AWS S3

Amazon Web Services S3 (Simple Storage Service) is a cheap and reliable way of storing data and is ideal for backups. Scheduling regular automatic backups of your WordPress website to S3 is pretty easy with a plugin, but it can be worth tweaking your AWS Credentials for better security.

This post will show you how to create a new user on your AWS account that has limited S3 permissions. It means if your site is ever compromised and the credentials stolen you’ll be in a far better position than having used your root AWS details! It’s also especially useful if you are managing backups of multiple client sites and do not want cross-access.

Step 1 – Create a new user with IAM in the AWS Console

  • Log into the AWS Console. Go to Services > Security & Identity > IAM
  • Create a new user (e.g. backup_myexample)
  • Copy and paste the Access Key and Secret somewhere; we’ll use those within WordPress shortly.

After creating your new user, go to their Policies and create a new inline policy. We’ll use inline, rather than group permissions so that each user you create (for backing up different websites) is isolated to their own S3 path.

Give the policy a name and paste and modify this Policy Document. Change my_awesome_bucket and my_directory to the bucket and path you’re using for these backups.

{
  "Version": "2012-10-17",
  "Statement": [
  {
  "Sid": "Stmt1441240868000",
  "Effect": "Allow",
  "Action": "s3:*",
  "Resource": [
  "arn:aws:s3:::my_awesome_bucket",
  "arn:aws:s3:::my_awesome_bucket/website_backups/my_directory/*"
  ]
  }
  ]
}

Your screen should look a bit like this
AWS IAM Policy

Step 2 – Install & Configure BackWPUp

  • Log into your WP Dashboard, go to Plugins > Add New Plugin and search for BackWPUp
  • Install it and create a new job. For testing you may want to do Database backup only, or list of plugins. This is much faster that a full site (Files) backup. Once you know it’s working setup a full site backup.
  • Set the backup to S3 Service.
  • On the S3 Service page select your Region and paste in the Access Key and Secret key from before.
  • Type in your bucket name and path to store the backups. It should match the IAM Policy Document

s3-plugin-cfg

Save your settings and run the job.

The plugin logs will let you know if it worked.

A few notes

  • The IAM Policy allows all S3 actions on the given S3 path. I was not able to get this plugin to work with more restrictive permissions.
  • The new S3 Standard-IA class is good for these backups. The storage cost is cheaper than the Standard class without sacrificing redundancy as with Reduced Redundancy Storage. The downside is that downloads of these objects are more expensive.
  • Remember to check your backups periodically

Can I Update My Own Website?

Customers come to your website looking for information and of course information changes. So it’s natural for site owners to want to be able to maintain their own sites, saving the delay and cost of having a designer make minor changes. Visitors also tend to respond favourably to a website which is “alive” and kept up to date. “Will I be able to update the site myself?” is a very common question to ask.

The answer generally is yes and there are a few steps involved in making that happen.

Developing a website on a Content Management System (CMS) makes updates easy for non-technical users. A CMS provides site owners with a private administration area they can log into to control site content. Implementing a CMS is a very common requirement, but it does add a little work to the process compared to a ‘static’ site, which is just a collection of HTML files. Supporting a CMS means that the design you and your designer come up with needs to be coded as a theme which ties the front end templates (HTML and CSS) to the CMS features.

Content Management System Options

There are a lot of options out there, but a few CMS are occupying the lions share of the market now. Some common choices are:

  • WordPress
  • A Custom Built Solution
  • Concrete5
  • Joomla
  • Drupal

There are also ecommerce focused systems such as WooCommerce (an extension of WordPress), Lemon Stand and Magento.

WordPress has been the fastest growing and mostly widely used option for a few years now and is my go-to option for most new sites. It’s easy to use and has a critical mass of usage and development that makes it hard to ignore. WordPress has grown out of its origins as a blogging system and now supports pages and custom content types (e.g. products, services, offices, etc.).

There’s a rich eco-system of plugins, themes and developers for WordPress and it has a very well implemented updates system.

A custom built solution may also be appropriate in some cases, but they would be the minority. One advantage of a custom system would be a very easy learning curve for the site owners as there’d be no extraneous features in the result.

Knowing your Content

For some websites the site structure will be a series of simple pages that owners can edit through a basic editor (a text area similar to Microsoft Word or Google Docs) in the site’s backend. Often times though your business will have a little more structure to your content and the CMS can be improved with a little development work to better match the nature of your information.

For example if your business had offices in six locations, each with a phone number, primary email and street address (with corresponding map) you could simply type that information into a standard page. The solution would work, but it’d be difficult for those maintaining the site to keep the formatting consistent. Structuring the phone numbers and maps in the correct way would be tedious. A better approach would be to create what’s called a “Custom Post Type” for Offices during the site’s development. Users would then have dedicated form fields for those pieces of information and the templates created by the designer would be responsible for maintaining a consistent design. This approach reduces the work involved in keeping the site up to date, and makes the office data available for other users (e.g. listing all offices in a footer or sidebar automatically).

Here’s how that might look to site editors in WordPress:

WordPress Custom Post Type

Training

The training requirements for staff to use a system like WordPress are pretty minimal; usually under an hour. It’s often a matter of resizing images to a sensible scale before uploading and knowing where to find the screens you need.

The extra time taken to develop your site on top of a CMS like WordPress or even programming a simple custom system for your business can be worthwhile. Site owners usually enjoy the flexibility of being able to make changes to their own site whenever they want without having to email and pay their designer to do it. The ease of maintenance can also mean more frequent updates which only helps you to get more value out of your website.

New MikeHealy.com.au Website

It’s been quite a long time coming, but I have just launched a new website for myself. The previous site served me quite well and lasted almost eight years (120 human years).

The goals of this new website are to:

  • improve on the design
  • provide better information to potential clients
  • ultimately lead to more projects
  • (whilst also being easier to maintain)

The visual design brings the site into line with a branding refresh I did some time ago.

On the technical side I’ve built the site out with a custom WordPress theme and CMS development. WordPress is a massively popular open source Content Management System and is increasingly becoming the defacto standard for many of the client sites I’m asked to build. My development efforts here will translate well to newer skills required for client work.

I’ve also paid attention to mobile and tablet optimization, creating a responsive layout which will adapt to many different devices and screen sizes. Like WordPress, Responsive Web Design is also becoming the standard way to give visitors a good experience regardless of when and how they’re visiting your site.

I’d love to hear your thoughts on the redesign.