Mike Mattner

With all of the changes going on in my industry, the improvement and exceedingly common use of responsive design techniques, and my general evolution as a web developer I needed to take a leap forward on my personal site. Hard to sit back and see all that was changing, see my own skill as a developer improve, and not do something. The problem has always been time.

I’ve been sitting on this redesign since at least November, and have scrapped many an iteration since then, but the holiday season kept me busy, and quite frankly I was never going to finish this unless I just launched the thing.

So in all it’s glory this is what it is for now. I’ll be making several changes as I go, improvements in the details, making sure I get everything right, because right now, it’s a hot mess, and adding back a lot of important functionality that I’ve not included in this theme just yet.

This site is tentatively responsive, but not everything plays nicely at this time. I’ll get there, I’m new to this. I’ve based the grid on Joni Korpi’s Golden Grid System, and it’s been modified slightly to accommodate my needs. A lot of my needs, unfortunately, made creating a workable grid kind of tough, but it works mostly.

I have a lot of modification to go through on older posts once I get to adding my archive links and search. I stupidly used a hacky grid in the old layout.

Well, take a look around, let me know what you think.

I actually had not been following the latest WordPress developments too closely, and so I was quite pleasantly surprised by what the upgrade to WordPress 3.3 offered in terms of looks and functionality. But…

There were a few things that I had some issues with. First, I absolutely hate that the toolbar is on by default and apparently can’t be turned off without losing some important functionality. The toolbar is my least favorite feature of all the newer WordPress features. It’s ugly and intrusive. Why are you guys so focused on pushing this thing? Is it because of WordPress.com? I get it’s usefulness in that context, perhaps, but with the WordPress.org implementation it gets in my way more often than not.

I create custom plugins for all of my WordPress installations with some custom functionality and admin modifications appropriate to their contexts. Apparently a few of those were sloppily built because as soon as I upgraded, they promptly broke. There was just one line I screwed up in regards to calling a function within a class (typo), but it was something I didn’t notice as I never really ran those plugins through rigorous testing.

One of my favorite plugins for modifying the administration screen is Dean Robinson’s Fluency Admin. Unfortunately the update seems to not be compatible with it. Not one to be deterred, I went about modifying the new admin css to look at least passingly like Fluency.

If you were interested in doing the same, you could run this code through your functions.php file in a pinch, or better yet add it in a plugin:

function like_fluency_css() {
    echo '<style>
*,body {font-family: helvetica, sans-serif;}
        img#header-logo{display: none;}
        #adminmenu div.wp-menu-image {float: left;width: 1px;height: 28px;}
        #adminmenu .wp-menu-image a{display: none;}
        #wp-admin-bar-wp-logo{display: none;}
        #adminmenuback, #adminmenuwrap {background-color: #222;border-color: #444;border-right-color: #ddd;}
        #adminmenu li.wp-menu-separator {display: none;}
        #adminmenu div.separator {border-color: #0e6ac8;}
        #adminmenu a.menu-top, .folded #adminmenu li.menu-top, #adminmenu .wp-submenu .wp-submenu-head {border-top-color: #444;border-bottom-color: #000;}
        #adminmenu a {color:#fff;}
        #adminmenu .wp-submenu a {color:#777;}
        #adminmenu a:hover, #adminmenu li.menu-top>a:focus, #adminmenu ul.wp-submenu a:hover {color: #fff;}
        #adminmenu li.menu-top:hover>a, #adminmenu li.menu-top.focused>a, #adminmenu li.menu-top>a:focus {background-color: #000;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);}
        #adminmenu li.wp-not-current-submenu:hover>a {border-top-color: #000;border-bottom-color: #000;}
        #adminmenu li.wp-not-current-submenu .wp-menu-arrow {border-top-color: #000;border-bottom-color: #000;background: #000;}
        #adminmenu li.wp-not-current-submenu .wp-menu-arrow div {background: #000;border-color: #000;}
        #collapse-menu {color: rgba(255,255,255,0.3);}
        #collapse-menu:hover {color: rgba(255,255,255,1.0);}
        #collapse-menu:hover #collapse-button {border-color: rgba(255,255,255,0.4);background-color: #333;background-image: -moz-linear-gradient(center bottom , #333, #444);}
        #collapse-button {border-color: rgba(255,255,255,0.2);background-color: #000;background-image: -moz-linear-gradient(center bottom , #111, #000);}
        #adminmenu .awaiting-mod, #adminmenu .update-plugins, #sidemenu a .update-plugins, #rightnow .reallynow {background-color: #464646;box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);color: #FFFFFF;}
        .folded #adminmenu .wp-submenu-head {border-bottom-color: #ccc;border-top-color: #ccc;}
        .folded #adminmenu li.wp-has-current-submenu, .folded #adminmenu li.current.menu-top {border-bottom-color: #6D6D6D;border-top-color: #808080;}
    </style>';
}
add_action('admin_head', 'like_fluency_css'); //remove logo from admin

There will be more in the days to come, but for now, I’m happy with the progress the team continues to make, and thanks for a great, free product!

I hadn’t given much consideration to including any sort of advertising on my blog in the past, but was given the opportunity to become a publisher in an advertising network recently, and I’m pretty honored by that. “What? My content might be fit for advertising?” Alright, I’m flattered. Feel like I’ve joined an exclusive club.

So, you may start noticing all of the ads here for services geared towards you, the web developer, all being served through AdPacks.com. Lucky for you, these are the only ads you’re going to see.

A little about AdPacks.com from their website:

Ad Packs is a division of BuySellAds.com, a well respected and hard-working bunch of design and advertising enthusiasts. BSA has been in business for almost 3 years and they serve ads on over 2,900 websites amounting to ~3 billion impressions per month. You can learn more about BSA from their about page or by checking out the BSA rap song on YouTube.

Never really considered mine to be the sort of site that might be useful for someone to advertise on. Maybe it is, maybe it still isn’t. Hopefully I can connect some folks with some fine, fine services, and by all means, click on through if you’re interested.

So, I got bored one day and decided that I wanted to make a weather widget for WordPress. Sort of. I thought that I needed one for a WordPress theme I was thinking about making. As per my previous experience, I couldn’t quite find one that fit the bill, and some were just downright cumbersome in implementation. A veritable nightmare.

When I first started development, I wasn’t too keen on what API/xml data feeds to use, so I went with the ever popular Weather.com XML data feed. Development was a bear because the terms of use were incredibly restrictive. You had to display their logo, which is fine, but then you HAD to display four links that were meant to generate click-throughs for them in some fashion; and all of this had to be visible near the weather data itself. Ok, I said to myself, I can deal with that, even if it makes the whole thing ugly.

Two weeks later, they decided to end the free XML data service in favor of a different API model. I thought, “Excellent, I can finally develop something free of the cumbersome links and logos I was required to use before!” Not so fast. This service cost several hundred dollars a year. Not so good for me if I’m creating a plugin. Then I discovered Yahoo! Weather, ironically enough, powered by Weather.com’s data.

Ok, get to it already, jerk.

Fine, fine, fine. I simply thought that background information would be useful for you. With the previous version of this plugin, the version using Weather’s data, you were required to register with Weather.com in order to obtain a key that would allow you to access the data, and I had to build that in to the plugin. This version will work fine without it. Yay! Simplification!

However, your site is limited in the number of requests that can be made in a given day. So if you have a high traffic site you’ll run into issues if you’re constantly requesting data from Yahoo. I had to build in data caching in order to keep those requests down, so now you’ll only access the API once or twice every hour to update data and that should take care of the problem. So, it’s not instant, but probably good enough.

At the moment this plugin is a little hit and miss. I don’t plan on doing much more with it, but feel free to fork this, modify it, whatever.

Download From the WordPress Repository

So, enjoy the fruits of my labor!

I’ve generally always handled forms with some quick and dirty php that used the standard mail() function to send me the resulting information. I never really got a good handle on setting that up properly, but, lucky for me, some one has done all of the dirty work by creating a class, PHPMailer, that was meant to handle emails quite a bit more extensively than I was able to do.

It’s actually fairly easy to get started using the class. This is the default implementation that the download provides for basic operation:

require_once('../class.phpmailer.php');

$mail             = new PHPMailer(); // defaults to using php "mail()"

$body             = file_get_contents('contents.html');
$body             = eregi_replace("[\]",'',$body);

$mail->AddReplyTo("name@yourdomain.com","First Last");
$mail->SetFrom('name@yourdomain.com', 'First Last');
$mail->AddReplyTo("name@yourdomain.com","First Last");

$address = "whoto@otherdomain.com";
$mail->AddAddress($address, "John Doe");

$mail->Subject    = "PHPMailer Test Subject via mail(), basic";

$mail->AltBody    = "This is for text based email"; // optional
$mail->MsgHTML($body);

$mail->AddAttachment("images/phpmailer.gif");      // attachment
$mail->AddAttachment("images/phpmailer_mini.gif"); // attachment

if(!$mail->Send()) {
  echo "Mailer Error: " . $mail->ErrorInfo;
} else {
  echo "Message sent!";
}

That is a very easy way to get up and running using the default mail() function. Most of the hard work has been done for you, all you’re left to do is to fill in the blanks. But hey, why go default when the thing provides you with some more advanced functionality? Like sending your email using SMTP.

The best way I found to handle my emails, and to send them using PHPMailer, was to create a component class, unoriginally named mmEmail, that would handle a few operations I needed in order to process the form and format the data.

class mmEmail {
        var $name          = null;
        var $email         = null;
        var $message       = null;
	var $time          = null;
	var $SMTP_host     = null;
	var $SMTP_username = null;
	var $SMTP_password = null;
	var $send_to       = null;
	var $send_name     = null;
        var $subject       = null;

	static $instance;

        public function __construct() {
		self::$instance = $this;
	}

        public function format($message) {
           //code that formats the message body
        }

        //this function handles the message template
        public function template($template) {

		$name    = $this->name;
		$email   = $this->email;
		$message = $this->message;
		$time    = $this->time;

	        switch( $template ) {
		    case 'html' :
			    $the_body = $this->format($message);
	                    $body = 'html only';
				break;

			case 'text' :
		            $body = 'text only';
				break;

			default :
			    break;

		}

		return stripslashes($body);
	}

        public function send() {
            //code to handle PHPMailer - I'll get to it.
        }
}

So this gets us set up to send our formatted email using the send() function above. That function uses PHPMailer to handle the heavy lifting.

function send() {
    $html_body  = $this->template('html'); //HTML Body
    $text_body  = $this->template('text'); //Text only body

    require("class.phpmailer.php");
    $mail   = new PHPMailer();

    $mail->IsSMTP(); //SMTP
    $mail->Host     = $this->SMTP_host;
    $mail->SMTPAuth = true;
    $mail->Username = $this->SMTP_username;
    $mail->Password = $this->SMTP_password;

    $mail->From     = $this->email;
    $mail->FromName = $this->name;
    $mail->AddReplyTo($this->email, $this->name);
    $mail->AddAddress($this->send_to, $this->send_name);
    $mail->Subject = $this->subject;

    $mail->IsHTML(true);
    $mail->Body    = $html_body;
    $mail->AltBody = $text_body;

    $result = $mail->Send();

    if($result)
    {
        echo 'Mail sent.';
    }
    else
    {
        $result = $mail->ErrorInfo;
        return $result;
    }
}

Using my class is then fairly straight forward. I’ll define a few constants for my settings to make things easier for me to read, and from there sending an email is as simple as:

require("class.mmemail.php");
$email = new mmEmail();

$email->name          = NAME;
$email->email         = EMAIL;
$email->message       = MESSAGE;
$email->time          = TIME;
$email->SMTP_host     = SMTP_HOST;
$email->SMTP_username = SMTP_USERNAME;
$email->SMTP_password = SMTP_PASSWORD;
$email->send_to       = SEND_TO;
$email->send_name     = SEND_NAME;
$email->subject       = SUBJECT;

$email->send();

Why do something this complicated, when the result looks so much like the original PHPMailer setup? Because this allows me to format, check, and sanitize my data and then send my emails using a template system. I encourage you to take a look at a solution like this the next time you need a better way to send form emails.

PHPMailer can be found at: https://code.google.com/a/apache-extras.org/p/phpmailer/