My first WordPress ‘widget’ – Mailman subscribe

Published on: Author: chuck

So, this isn’t really a widget. It is more like some JavaScript/jQuery/HTML stuffed in a text widget with a supporting chunk of php on the server. I recently got started with WordPress and I’m working on creating a web presence for my community and part of that project is creating an email list. I found Mailman and a plugin that supports new subscriptions through WordPress. The plugin seemed to have some drawbacks so I decided to fashion my own, sort of. I started with HTML form elements in a text widget that linked to the subscribe page. After that, having spent some time previously becoming acquainted with JavaScript, I started adding the included JavaScript elements. Since my mailman install and the website live on different domains I couldn’t do a simple AJAX get without tweaking other settings so I also created a little chunk of php to handle the cross domain stuff. It’s not elegant, or even pretty, but for the most part it is functional so I decided to share with the world.

The contents of the text widget. Find and replace the text in all caps with details relevant to your setup.

<div id='mm_sub'>
<p><b>Want to know what's happening? Subscribe to our email list.</b></p>
<form id='mm_form' action='http://MAILMAN.SERVER.URL/mailman/subscribe/MAILMANLIST'>
<input id='mm_sub_email' name='email' type='text' value='your email' />
<input id='mm_sub_button' type='submit' name='mm_sub_button' onclick="javascript:return false" value='Subscribe' />
</form>
</div>
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" >
</script>
<script type='text/javascript'>
   var subdiv = document.getElementById('mm_sub');
   var subform = document.getElementById('mm_form');
var subbutton = document.getElementById('mm_sub_button');
var subemail = document.getElementById('mm_sub_email’);
subemail.onclick=function() {
subemail.setAttribute("value","");
} ;
subform.setAttribute("action","");
subbutton.addEventListener('click', function() {
var re = new RegExp(".*@.*\..*","i");
email = subemail.value;
result = re.test(email);
if (result == true) {
                                     var list =  "&list=MAILMANLIST";

var url = "/subscribe.php?email=";
url = url + email;
url = url + list;
                                                                     $.get(url);
   subdiv.innerHTML = "<p><b>Thank You</b><br>Please check your email to confirm your subscription. You may need to check your SPAM folder.";
 }
</script>

The php helper script(subscribe.php). As before, replace the all caps stuff with stuff relevant to your setup.

<?php
$mailman="http://MAILMAN.SERVER.URL/mailman/subscribe/";
$list=$_GET['list'];
$email=$_GET['email'];
$url=$mailman . $list . "?email=" . $email;
echo "<script type='text/javascript'>alert('$url')</script>";
$homepage = file_get_contents($url);
?>
Categories: IT