How-To Article: Configuring "Developer Mode" for the List Subscribe WordPress plugin

With MailChimp List Subscribe v1.4, we've updated our WordPress plugin to include a developer mode (aka “kitchen sink”) that allows developers to display an actual MailChimp widget on a development or testing server that is not accessible from the internet. This allows designers and theme developers to work on CSS locally without linking to an actual MailChimp account. To enable Developer Mode, add the following line of code in your wp-config.php file:

define('MAILCHIMP_DEV_MODE', true);

Note: You'll want to make sure you add that line above the "That's all, stop editing!" line in your wp-config.php file.

Add in the 'DEV_MODE' line above the "stop editing" comment

When Developer Mode is enabled, regular plugin form functionality is replaced and placeholder information is used instead. No OAuth2 authentication is necessary (or possible) and only the Custom Styling options will be visible on the MailChimp Setup page. Since the form isn't connected to a live MailChimp account, Developer Mode should only be used for sites that don't have internet access. Of course, if possible, it's always best to use the regular "production" mode by connecting to a MailChimp account.

Using form filters

Developer Mode has several WordPress filters available that allow its default content to be easily changed to better match the expected output and fields in the site being developed. The filters below only apply to Developer Mode and shouldn't be used to alter the MailChimp widget output in a production environment (you can use CSS for that!).

The default fields are contained in the mailchimp_get_kitchen_sink_fields() function within the mailchimp_widget.php file. Do not alter this file directly. Instead, use the provided filters to change content to your liking in your theme's functions.php file. The default content can even be replaced entirely with a new array, if desired.

Example: Removing a field

If you wanted to remove the radio button example included with the default fieldset, you can set up your custom field function and add a filter to unset that single field.

  function my_mailchimp_fields( $fields ) {
      unset ($fields[X]);  //Replace "X" with the field you want to unset, where the first field on the form is 0.
      return $fields;
  }
  add_filter ( 'mailchimp_dev_mode_fields', 'my_mailchimp_fields');

By unsetting all fields, you could build your example form from scratch, locally.

Example: Adding fields

Adding a field to your dev form requires adding an array of options to the fields variable.

To add a text field to your form, you'd need to add something like the following:

function my_mailchimp_fields( $fields ) {
    $fields[] = array (
        'name' => 'First Name', 
        'req' => true, 
        'field_type' => 'text', 
        'public' => true, 
        'show' => true, 
        'order' => '1', 
        'default' => '', 
        'helptext' => '', 
        'size' => '25', 
        'tag' => 'FNAME', 
        'id' => 5,
    );
    return $fields;
}
add_filter ( 'mailchimp_dev_mode_fields', 'my_mailchimp_fields');

While text fields are fairly straightforward, dropdown and radio field types will require an choices key. That parameter will be an array of options to display to subscribers on the form.

    $fields[] = array (
    'name' => 'Spirit Animal:', 
    'req' => true, 
    'field_type' => 'radio', 
    'public' => false, 
    'show' => true, 
    'order' => '2', 
    'default' => '',
    'choices' => array(
        0 => 'Chimpanzee',
        1 => 'Gorilla',
        2 => 'Gibbon',
        3 => 'Orangutan',
        4 => 'Mandrill'),
    'helptext' => '', 
    'size' => '25', 
    'tag' => 'SPRTANML', 
    'id' => 5,
);

Other filters

In addition to the field fiters, there are also filters for customizing other parts of the form.

mailchimp_dev_mode_header_text

Default value: MailChimp Developer

Appears as the widget title. Return the value to replace default.

mailchimp_dev_mode_subheading_text

Default value: This is the subheading text.

Appears immediately after the Header Text. Return the value to replace default, false to remove.

Example to remove the subheading text:

function my_mailchimp_subhead() {
    return false;
}
add_filter ( 'mailchimp_dev_mode_subheading_text', 'my_mailchimp_subhead' );

Returning false is important. Do not return an empty string.

Example to change the "Submit" button

mailchimp_dev_mode_submit_text

Default value: Subscribe

Text displayed in the form submit button at the bottom of the form. Return the value to replace default.

An example to replace the submit button text (the others work the same way):

function my_mailchimp_submit() {
    return 'Sign up';
}
add_filter ( 'mailchimp_dev_mode_submit_text', 'my_mailchimp_submit' );