WordPress Challenge #2: Tips

Depending on where you are with your current WordPress Challenge (be it this #2 one or something else), I wanted to share a few tips that are somewhat related to the WordPress Challenge #2.

Enqueueing Scripts & Styles conditionally

This is a lesson I always like to teach others because it’s really important. Knowing how to load styles & scripts properly makes WordPress sites more optimized from the start.

So, let’s get to it.

Enqueue Scripts & Styles conditionally on front:

<?php

add_action( 'wp_enqueue_scripts', 'my_function_to_enqueue_scripts' );

function my_function_to_enqueue_scripts() {
 global $post;
 
 // We want scripts to load only on single pages, posts or other CPT
 if ( ! is_singular() ) { return; }

 // Edge-case. If no post is loaded.
 if ( ! $post ) { return; }

 if ( ! has_shortcode( $post->post_content, 'contact-form-shortcode' ) ) {
   return;
 }

 // Here, I can enqueue scripts and styles.
}

Enqueue Scripts & Styles conditionally on admin:

<?php

add_action( 'admin_enqueue_scripts', 'my_function_to_enqueue_scripts_admin' );

function my_function_to_enqueue_scripts_admin( $hook ) {
  $my_hook = '';
  if ( $hook !== $my_hook ) { return; }

 // Here, I can enqueue scripts and styles.
}

In the admin area, we can check if the user is on our settings page or a page where we have our content displayed. You can easily check that by doing die($hook); in there and reloading the page where our content is. It will show you the hook you can use.

Contact Form - Fields configuration

Let’s now see how you could have your field configurable so you can render more fields in your contact form.

Shortcode approach

Let’s imagine we have an attribute “fields” in the shortcode. And we allow a simple way of defining them such as this:

[contact-form fields=Name|text,Email|email,Age|date]

Then inside of the function that renders the shortcode, you use that attribute and reconstruct it into fields:

<?php

// Inside of the function
$fields = $atts['fields'];
$fields_config = explode(',', $fields );

foreach( $fields_config as $field ) {
  $configuration = explode('|', $field );
  $field_name    = $configuration[0];
  $field_type    = $configuration[1] ?? 'text';

  // Send configuration, or each variable separate...
  echo my_function_to_render_field( $configuration );
}

This way, you could extend that to allow more options in there, so the 3rd element of each field would be options for dropdown or something like that. Maybe the name of the field that is sent when posted.

Filter approach

Another, more “sexy” way, of handling this is to have fields defined in a function. Then those fields are filtered so you can add more fields.

<?php

function my_contact_fields() {
  $fields = [
    'email' => [
      'type' => 'email',
      'name' => 'email',
      'label' => __( 'Email', 'textdomain' ),
      'validate' => 'function_to_validate'
    ]
  ];
  
  return apply_filters( 'my_contact_fields, $fields );
}

add_filter( 'my_contact_fields', 'add_name_field_to_fields');

function add_name_field_to_fields( $fields ) {
  $fields['name'] = [
    'type' => 'text',
    'name' => 'name',
    'label' => __( 'Name', 'textdomain' )
  ];
  return $fields;
}

In the above example, you can see now how contact form fields are extensible and another plugin can be used to add more fields to it.

In case you have each contact form saved inside of a database (as a CPT or similar), you can pass an ID to the function for fields. So fields can be filtered out, depending on the contact form ID.

Conclusion

Hope you’ve learned something new or that I was able to give you more ideas on how to solve a part of your coding challenges.