Adding sendmail/SMTP to experts plugin

Adding sendmail/SMTP to experts plugin

The expertise plugin I’m writing and have been publishing about needs a selector in the admin screen to allow sending mail through SMTP or through sendmail. This article will include some javascript to do just that.

GMAIL

Because of my local setup at first I decided to let the experts plugin use GMAIL’s SMTP service for mailing the Experts when new expertise requests are posted. GMAIL has a great free service to allow people to use their SMTP servers to send mail through. I’m also a Google Apps user to host my own domain’s emails on GMAIL so it seemed like a natural thing to do at first. GMAIL’s setup is a little bit tricky however as not only do you need to use TLS (encryption) and authentication to use it, there are also some complications with properly setting the sender of the email.

I’ve long ago been able to configure my local MTA (postfix) to do all of the above but it’s apparently not so trivial to do this directly from PHP. I tried doing this using the Wordpress supplied PHPMailer class but so far I have not been able to get it to send email succesfully using SMTP.

Sendmail

The PHPMailer class can also send email using the sendmail method. While the sendmail name is reminiscent of the good old sendmail, it basically means to use the local MTA on the server Wordpress is running on. As I’ve configured my local MTA properly it was easy enough to get PHPMailer to send email through the sendmail method.

So while the experts plugin is now able to send email using the sendmail method, I’m starting to think that the plugin I’m developing may be useful to others as well down the line and I decided to keep the broken SMTP part in order to fix it later on. This means I need to have a mail method selector in the admin menu and some code in the plugin to decide what method to use based on the selector value.

Adding the Selector

Now that I have the register_settings() understood, it was fairly easy to add a selector. All that it required was to add a mailmethod field to the expert_settings array:

add_option('expert_settings', array(
 'onpost' => 1,
 'mailmethod' => 'sendmail',
 'smtp_user' => '',
 'smtp_password' => '',
 'smtp_server' => 'smtp.gmail.com'));

As well as a select field to the admin form:

<tr>
 <td>Mail Method</td>
 <td><select name="expert_settings[mailmethod]">
 <option value="smtp" <?php selected("smtp",$expert_settings[mailmethod]); ?>>SMTP</option>
 <option value="sendmail" <?php selected("sendmail",$expert_settings[mailmethod]); ?>>Sendmail</option>
 </select></td>
 <tr>

This literally took me like 5 minutes to do after having spent considerable time on learning the register_settings() stuff.

Make it look Pretty

Since it was so easy to add the above I figured I might as well spend some time I saved on making it look pretty; When the admin chooses to use the sendmail method for sending mail, the SMTP settings (eg. user/password/servername etc.) are irrelevant so we could add some Javascript to enable/disable those fields when either mail method gets selected by the user. The best way to dynamically change form fields is still by using Javascript so let’s go ahead and add a scripts directory to our project:

fredl@omega:/web/prd/wordpress.3dn.nl/wp-content/plugins/experts$ mkdir scripts
fredl@omega:/web/prd/wordpress.3dn.nl/wp-content/plugins/experts$ svn add scripts/
A         scripts

And a bit of Javascript in it’s own file:

fredl@omega:/web/prd/wordpress.3dn.nl/wp-content/plugins/experts/scripts$ svn add admin.js
A         admin.js

We need to include this inside our admin form. To do this we first need to take a step back and look at our admin menu definition again. So far we’ve only told Wordpress to add an action to the admin_menu using

// Add page name, then scripts and styles
 if (function_exists('add_options_page')) {
 add_action("admin_print_scripts", 'expertise_admin_scripts');
 add_action("admin_print_styles", 'expertise_admin_styles');
 }

function expertise_admin_scripts () {
 wp_enqueue_script('expertise-js', EXPERTISE_PLUGPATH.'scripts/admin.js');
}

function expertise_admin_styles () {
  wp_enqueue_style('expertise-css', EXPERTISE_PLUGPATH.'style/admin.css');
}

This should now include our still empty piece of Javascript in our admin menu. This is not nearly perfect as the add_action(“admin_print_scripts”… should really have a page name like add_action(“admin_print_scripts-$pagename”…. to limit which admin pages the script gets enqueued in but at the time of writing this I’m not really sure how to do this. I also added a constant EXPERTISE_PLUGPATH to the plugin as well as a CSS file that may come in handy when we implement our JS to dynamically disable elements.

So now we have the JS script and the CSS in place, we need to add some action to the mailmethod select:

<select name="expert_settings[mailmethod]" onChange="toggleSMTP()">

Remember, we want to toggle the visibility of our SMTP settings when the Sendmail or SMTP mailmethod is chosen. So in scripts/admin.js we create the Javascript function toggleSMTP():

function toggleSMTP () {
 alert("Toggling");
}

And indeed we get a nice popup saying ‘Toggling’ when we toggle the mailmethod in the admin screen. While the popup is a good test to see if things work so far, ofcourse it needs some real functionality now so we wrap our SMTP settings into a div. We define the div style first in admin.css, calling it simply ‘#smtpsettings’ and wrapping our SMTP settings in it. The problem with this is that tables, which I used to layout the settings menu initially, don’t behave very nicely with CSS, so since I added some custom CSS file to the menu anyway I decided to make the settings menu a CSS based layout instead. I also decided to disable the SMTP inputs instead of making them invisible. So in toggleSMTP() we first want to get the selected value of the mailmethod select and based on that we want to enable/disable the three SMTP inputs:

function toggleSMTP () {
 var dropdownIndex = document.getElementById('mailmethod').selectedIndex;
 var dropdownValue = document.getElementById('mailmethod')[dropdownIndex].value;
 if (dropdownValue == "smtp") {
 document.settingsform.smtp_user.disabled = false;
 document.settingsform.smtp_password.disabled = false;
 document.settingsform.smtp_server.disabled = false;
 } else {
 document.settingsform.smtp_user.disabled = true;
 document.settingsform.smtp_password.disabled = true;
 document.settingsform.smtp_server.disabled = true;
 }
}

So now we end up with an admin menu that looks like:

Not looking bad I think!

Read More

If you find this article interesting you might want to read some more articles in the Wordpress category:

• New 3DN Techblog
• Add Ajax to Expertise Plugin
• Checking Comments for Requests
• Adding sendmail/SMTP to experts plugin
• Periodic Expertise Events

Or in the Coding category:

• Add Ajax to Expertise Plugin
• Checking Comments for Requests
• Adding sendmail/SMTP to experts plugin
• Periodic Expertise Events
• Expertise Shortcode

If you have any questions regarding Wordpress, check out our Wordpress page or our Programming page. Note: The code I’m writing about is constantly under development. I can’t write about every little change I make but I try. I’m learning as I go because this is my first Wordpress plugin. If you’re interested in the latest code you can always look in SVN through my public Trac server.