• DaveDev

    How do I send Email with WordPress hosted on Azure Websites?



    Via DaveDev.net



    Recently I moved my old MSDN Blog to the new DaveDev.net url running hosted WordPress on Azure WebSites.  Setting up the new blog couldn’t have been more simple (hint – Click New – Compute – WebSites – Gallery – WordPress in the Azure Dashboard) and only took about five minutes.

    The stuff that actually took the longest was customizing WordPress itself (themes, plugins, etc) , pointing the new Azure Website to a cname (davedev.azurewebsites.net to davedev.net) and then making sure I was backing up the MySQL Database.  One of the areas that was not obvious to me however was how to send Emails.

    Usually, if you sign up for WordPress from an online hoster or WordPress.com you will have an SMTP server set up for you which enables the  wp_mail() function to automatically send Email on  your behalf.  This is not the case when you are running WordPress on Azure but the good news is there is a free solution via the Azure Marketplace. 

    The intent of this post is to walk you through the steps to get started with Email (it’s a free service too) on your WordPress Azure Website instance.

    Contact Form

    WordPress offers a crazy amount of customizations so the first step you need to do is to decide how you want to enable people to contact me on my Blog.  After sifting through a bunch of contact form plugins I decided on one that would allow me to add a new tab and a clean contact form.

    Here is what the Contact Tab looks like now on my Blog in a typical desktop browser:


    Clicking on Contact will take the blog visitor to a clean contact form where they can enter their name, email I can each them at and then their message.


    Once they click send they will get a response message if their Email has been sent correctly back to me.


    If you have tried adding a similar contact plugin to your Azure Websites hosted WordPress instance this is where you will first encounter problems.  Any call to send wp_mail() will result in an error as the Azure instance doesn’t know what SMTP server to use.  I will cover that in a bit but first let’s walk through what the generated Email will look like.



    You can easily apply filters now to the incoming Blog Emails and when you hit Reply to the Email it will be sent to the Email address the Blog visitor filled out in your Contact Form.

    Setting things up

    So how did I go about creating the Contact Form and enable Emails?  The first step was to install the plugin I wanted to use for Blog Feedback Emails.  I chose Contact Form 7 and then activated the Form as seen below.


    The Contact Form will add a new menu option in your WordPress Dashboard called Contact.  Opening it up will show a new form called “Contact form 1” with some code in it.


    I copied the code from the Contact Form 1 and pasted it into a new Page for my Blog called “Contact”.


    This is the Contact page you now see listed in my Blog’s Tab Menu.  Now that I have a Contact Form Up and running the next step was to sign up for an SMTP Service that would send Emails on my behalf.

    Setting Up SendGrid as a SMTP Service

    In order for our Contact Page to send Emails we will need a SMTP Service.  Luckily for us SendGrid offers just that and is part of the Azure Store.


    Simply open up the Azure Dashboard, click New, select Store and then choose SendGrid from the App Services Add-ons list.


    There is a completely free tier that will enable you to get (or blast out) up to 25,000 emails a month.  That is more than enough for the purposes of a Feedback page on our Blog.


    Like all products in the Azure Store billing is integrated with your Azure monthly Bill as is single sign on.  I get complete status for the Sendgrid Service right from my Azure Dashboard and clicking on the SendGrid Name will take me to the SendGrid portal using my Azure credentials.


    The only additional step needed is to verify your email address (which will be your Microsoft ID assigned to your Azure account).  Once that is done be sure to copy over your SendGrid username and password right from the AppBar by clicking Connection Info.

    You will also receive an Email from the Azure Store confirming your purchase of the SendGrid service using the free tier.



    Setting Up WordPress to use a custom SMTP Service

    Now that we have a Contact Form set up, and the SendGrid SMTP Service enabled we need to update our WordPress Blog so that any calls to the wp_mail() function will be routed to our new SMTP Service.

    There are a bunch of free WordPress plugins that will allow you to do this I chose to go with WP-Mail-SMTP.


    This plugin will add a new Email option in the Settings menu for your WordPress Dashboard.  This is where you can set up your From and Name for the Email.  Make sure you select SMTP for Wordpress emails, and then enter your SendGird information as seen below.  Make sure you use the smtp.sendgrid.net SMTP Host name and specify a port.  I used 587 based on the SendGrid recommendations.




    That’s it!  You can now send a Test message to yourself using the same settings page or go back to your Contact Form and send one from there.  The only remaining recommendation I would have is to turn off new comment notifications inside your WordPress Dashboard.  This is enabled by default but since my WordPress Azure Website instance could not send emails before I wasn’t getting spammed.  Once the SMTP Host was set up I started to get notified every time a spam comment came in and oh my there are a lot of those with WordPress. 


  • DaveDev

    Are you stuck behind a Firewall with no access to Twitter? Here’s the juicy bits in case you missed it!


    I still think I have one of the coolest jobs at Microsoft.  Not only do I get to speak my mind online, conferences, workshops and usergroups but I also get to go into actual customer accounts.  Which brings me to Twitter.  I know it sounds crazy to a lot of my Facebook, Twitter, and FriendFeed buds but many organizations still block sites like Twitter and Facebook.  Yup, completely blocked!  No to mention access to IM clients like the new Live Messenger.


    As someone who spent the last five years in a corporate environment “lockdown” before coming to Microsoft I can relate.  We all know that most of the really good information today comes from your fellow devs online via blogs, forums, twitter and sites like Channel9

       DaveDev-Facebook  DaveDev-TwiiterFeed DaveDev-XboxLive

    These technologies also interoperate allowing you to host feeds of your activities in one place.  My blog for example has my latest X-Box Live happenings, Facebook, Twitter and my Facebook status gets updated from my Twitter feeds.  Twitter has become THE place to post great links (most likely due to the 140 char limit) and I’m not just talking about humorous pop culture references.  Real juicy technical bits!  I recently was at an internal “Developer Day” at a large financial institution (the name would be very familiar to you if I mentioned it).  Out of 120+ people in the room only 5 were on twitter.   That is only 4%!  The other 96% of those guys aren’t seeing any of the links I’m posting.  They can’t even go look at the html page of my feed because the Twitter.com domain name is blocked!

    Realizing this I’ve decided to repost my technical links up on my blog.  I’ve left out my tweets about non-technical stuff or what’s going on in my personal life.  If you still want those bits you can find them up on Twitter.  But for everyone who has missed out here are some of the recent technical tweets going back to December that I think you’ll enjoy.  An “RT” means re-tweet and is a link someone else posted that I thought was important enough to share.  You can follow those people too by going to twitter.com and then their @name, for example twitter.com/mix09.

    Here is the list…

    Mike Swanson has updated the Adobe Illustrator to XAML Plug-In. Check it out! http://bit.ly/u2qe

    RT @MIX09: RT @ch9: Scott Guthrie On Silverlight, MIX09, Keynotes, Developers and Designers http://tinyurl.com/czx82s

    RT @Veronica: Apple vs. Palm: the in-depth analysis http://bit.ly/ypEc

    RT @shanselman: *Wow*,REALLY nice WPF ClickOnce Twitter Client via @blackgold9 http://snurl.com/chirp (.net 3.5 sp1 use http://bit.ly/QxNi8)

    RT @adkinn: 6 Things I Bet You Didn't Know About Data Binding in WPF from Nate Zaugg http://ff.im/-Ig00

    Microsoft Surface - Retail Banking Demo http://bit.ly/tc38. See it in person too at the NYC Enterprise DevCon http://bit.ly/Zufu

    Good article on current perceptions of Microsoft and how the company is changing that - http://bit.ly/82Zn

    Anyone else notice that Photosynth is running as a Silverlight control now? Both at CNN Site http://twurl.nl/kn5753 and on Photosynth Site.

    RT @Pete_Brown: my article on styling the charts in the Silverlight toolkit came out today: http://tinyurl.com/92n8om Nice job Pete!

    Linux/Moonlight and PPC Mac SL 1.0 now working for Obama Inauguration Silverlight stream! Nice work guys! http://tinyurl.com/789asq

    Wow - amazing must watch video of inspiration http://tinyurl.com/5qfrpl. Found via the NYC planecrash rescuers site - janiskrums.com

    64 and 32 bit versions of WIndows7 beta are up on MSDN Subscribers page now! Go grab it. http://msdn.microsoft.com

    Zune team isolated 30gig lockup probs. Had to do with 2006 models clock w/ leap year. Will fix automatic 1/1/09. http://tinyurl.com/873k8z

    Honoring its cross platform commitment the LiveLabs team just released Seadragon Mobile for iPhone http://tinyurl.com/5tn6qm . Works great!

    All MDC attendees are going to get BETA1 of WIndows7! Win7 has been my primary o/s since M3 build. Check it out: http://msdndevcon.com.

    Good site with all sorts of LINQ examples: http://tinyurl.com/62j6sb. If you're like me this will help your SQL brain think LINQ.

    Great Wired article about the new Microsoft under Ozzie's direction. http://tinyurl.com/5zhz7q

    If you do have access to Twitter at work but haven’t joined up yet here are my thoughts on why I think you should.  Don’t forget to follow me with your favorite Twitter client too.  If you run into any snags getting started feel free to leave me feedback on via this blog and I’ll walk you through.  Hope to see you all online!

    Bookmark and Share

  • DaveDev

    Defining Layout in a Windows 8 Metro Style App using CSS3, HTML and JavaScript



    I have been coding a Windows 8 Metro Style App using the new Windows 8 Release Preview bits and Visual Studio Express 2012 RC.  The app is going to be a retro shooter that takes advantage of HTML5 Canvas for the main game engine along with several Windows 8 Metro Style App Features.  This post is going to cover how to layout the elements of your game interface on the screen. 

    My game’s Layout is made up of two screens: a Main Menu (which is the default screen upon loading for first time) and then an actual Game Screen where gameplay takes place.  I used CSS3 (specifically floats) to align my Player Score, Name, Level and other screen elementals.  Let’s dive into how each screen is set up.

    Main Menu

    The Main Menu displays current game version number, game title and a button to begin game play.  It also includes an AppBar Menu (not shown in the screenshots below) that can be accessed at any time.  Here is what the Main Menu looks like:





    You will notice that I am playing the game along side another application (IE 10) like some of my players will most likely do.  The screen can be rendered in three different states based which are named fullscreen, filled or snapped mode.  I want to point out that having your application support multiple screen sizes and Viewstates is a very important feature of all Metro Style Apps.  If you haven't already read it definitely check out the Scaling to Different Screens post on the official Windows 8 Blog.



    Since this is such an important topic broke out this topic into two posts.  We will cover layout in this post and how to detect and scale for the different Viewstates here.  In the interest of simplicity this post will concentrate on just getting the elements lined up in the fullscreen mode (the default for all Metro Style Apps).  Let’s take a look at how we do that:  

    Inside of my default.html page we see that the title image, game version and play button are just standard html elements wrapped inside a <Div> tag I call divMenu.

    <div id="divMenu">
            <img id="imgMenu" src="/images/menutitle.png" />
            <div id="txtVersion"></div>
            <button id="btnStart">PLAY</button>

    All of our custom layout occurs in a css file called space.css we reference in our default.html like so:

    <!-- App references -->
    <link href="/css/default.css" rel="stylesheet">
    <link href="/css/space.css" rel="stylesheet"/>
    <script src="/js/default.js"></script>
    <script src="/js/sound.js"></script>
    <script src="/js/ship.js"></script>
    <script src="/js/starField.js"></script>


    Thanks to CSS3 Web Fonts we can easily assign different type faces to our screen elements.  For my game I downloaded the Final Frontier Old Style font a royalty free font available off the web.  I then tell both the version text and button text to use this font.  Each of the elements I assign the maximum width and height I would like along with the text font size.  imgMenu is also told to be aligned 120px down from the top of the screen.

    @font-face {
        font-family: 'Final Frontier Old Style'; 
        src: url( '/fonts/finalold.ttf');
    #imgMenu {
        max-width: 555px; 
        max-height: 118px; 
        top: 120px;
    #txtVersion {
        font-family: 'Final Frontier Old Style'; 
        font-size: 20px;
        color: #ffd800;
    #btnStart {
        width: 300px;
        height: 150px;
        font-family: 'Final Frontier Old Style'; 
        font-size: 30px;  
        z-index: 100;


    Remembering that Windows 8 devices come in all different shapes and sizes I programmatically set the  menu elements up on the center of the screen at runtime.  This happens in the showMenu function inside my default.js file.  I calculate the exact center of the screen and then set the x and y coordinates of my elements like you see below.

    //Set Up Menu Screen UI Elements
    function showMenu(event) {
        menuEnabled = true;
        txtPlayerName.style.visibility = "hidden";
        txtScore.style.visibility = "hidden";
        imgPlayer.style.visibility = "hidden";
        imgMenu.style.visibility = "visible";
        btnStart.style.visibility = "visible";
        txtVersion.innerHTML = GAME_VERSION;
        txtVersion.style.visibility = "visible";
        txtLevel.style.visibility = "hidden";
        var menuX, btnX, btnY;
        menuX = (SCREEN_WIDTH - imgMenu.width) / 2;
        btnX = (SCREEN_WIDTH - btnStart.clientWidth) / 2;
        btnY = (SCREEN_HEIGHT - btnStart.clientHeight) / 2;
        imgMenu.style.posLeft = menuX;
        btnStart.style.posLeft = btnX;
        btnStart.style.posTop = btnY;


    Game Screen

    The Game Screen  displays the player’s score, level, name and picture.  This is also where we are declaring our HTML5 Canvas tag.  Similarly to the Main Menu screen it can appear in all three Viewstates but we will focus on the Fullscreen mode for this post.





    All of these elements (except for the player image) are standard <div> tags wrapped inside a main <div> tag we call divGame  inside of our space.css file.

    <div id="divGame">
            <div id="txtScore">Score: 0</div>    
            <div id="txtLevel">Level: 0</div>
            <div id="divPlayer">
                 <div id="txtPlayerName">Player1</div>
                 <img id="imgPlayer" src="/images/helmet.png" />
    <div id="txtNewLevel"></div>
    <div id="divRoot" data-win-control="WinJS.UI.ViewBox">
        <canvas id="canvas" ></canvas>


    Just like the Main Menu we assign the custom Font to our text elements and position them on screen using floats. 

    @font-face {
        font-family: 'Final Frontier Old Style'; 
        src: url( '/fonts/finalold.ttf');
    #txtScore {
        font-family: 'Final Frontier Old Style';
        font-size: 50px;
        color: #ffd800;
        text-align: left;
        margin-left: 10px;
    #txtPlayerName {
        font-family: 'Final Frontier Old Style'; 
        font-size: 50px;
        color: #ffd800;
    #txtLevel {
        font-family: 'Final Frontier Old Style'; 
        font-size: 50px;
        color: #ffd800;
        top: 0;
    #divPlayer {
        position: absolute; 
        top: 0; 
        right: 0; 
    #imgPlayer {
        max-width: 100px; 
        max-height: 50px;
    #txtNewLevel {
        font-family: 'Final Frontier Old Style'; 
        font-size: 100px;
        visibility: hidden;


    Finally we set up all of our on screen elements through the startGame function once the player clicks on the Play button to begin.  

    //Set up Game Screen UI Elements
     function startGame(event) {
         imgPlayer.style.visibility = "visible";
         imgMenu.style.visibility = "hidden";
         btnStart.style.visibility = "hidden";
         txtVersion.style.visibility = "hidden";
         txtLevel.style.visibility = "visible";
         var lvlX = (SCREEN_WIDTH - txtLevel.clientWidth) / 2;
         txtLevel.style.posLeft = lvlX;
         menuEnabled = false;


    Game Coordinate System

    The last piece we need to set up is a coordinate system for our game.  This includes the size of each ship, the area of the screen they can be drawn on before appearing on the opposite side, and then the current width and height of the screen.  The screen width and height will determine how big our Canvas element needs to be rendered at as well.

    I use four different variables inside the default.js file for this with the ships width and height remaining constant (I created all of my ship images to be this size) and then the screen width and height to change based on the resolution of our current Windows 8 device.

    var SCREEN_WIDTH = 1366;
    var SCREEN_HEIGHT = 768;
    var SHIP_WIDTH = 190;
    var SHIP_HEIGHT = 100;


    We then calculate what the size of our canvas should be during our initialize function:

    //Init Canvas
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");
    //Set up Coordinates for Screen Size
    //Adjust for different screen sizes
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    SCREEN_HEIGHT = canvas.height;
    SCREEN_WIDTH = canvas.width;
    //Set boundries to be one ship size
    MAX_X = canvas.width - (SHIP_WIDTH + 20);
    MAX_Y = canvas.height - (SHIP_HEIGHT + 50);


    By setting up the coordinate system at run time we can support multiple resolutions and even dynamically scale to fit higher resolutions if the user changes them (for example docking a tablet and attaching a bigger monitor).  Here is an example of our game running on a 1366x768 tablet size screen as well as a 2560x1440 which you would typically see in a 27” inch all in one pc.



    All of the elements align directly center with the version showing up in the bottom right.  I also have the ability to scale up the image and button size when in a different resolution.  I am not doing that in the screen shot above but will show you how using CSS3 transforms in my next post covering Viewstates.



    I hope this post has given you an idea of how easy it is to lay out interface elements in your Metro Style App using CSS3, HTML5 and JavaScript.  If you are currently working on a Windows 8 app and want to get into the Windows Store I would love to hear about it!

    You may also want to check out my previous Windows 8 Metro Style Development Tips:

  • DaveDev

    Attention all Windows Phone Developers – Phone Tools, Mango bits, and AppHub have all been updated!


    The Windows Phone Team has recently pushed out three important updates that you should take advantage of.

    Developer Tools Beta 2 Refresh (Release Candidate)

    The first of the new updates is for the Windows Phone Developer Tools.  Cliff Simpkins from the Phone Team has a break down of some of the new features on his official blog post here.  His top 5 are as follows:

      • Application platform APIs are now locked; you can feel confident to start getting ready for submitting your apps next month.
      • Emulator now has a nifty screenshot capability built in, allowing you quickly snap quality images of your app without the need of separate tools or cropping time. The images are great for use in app submission process or to share on your blog or with folks such as my team (hint hint).
      • The profiler has been greatly improved and provides memory profiling.
      • As of this drop, you can install NuGet into the free version of the WPSDK tools. I find NuGet to be one of my favorite productivity boosters and I’m happy to see the extension supported in the free tools.
      • The drop includes an initial peek at the Marketplace Test Kit; with the RC release, you’ll be able to use the included version of this toolkit to test your XAP file against the same certification testing tools that we use when ingesting apps for the Marketplace. For this refresh, it’s there but not fully functional; but more on this in a future blog post.

    You will also notice a new RC (Release Candidate) in the control panel tools listing.


    Be sure to read the full official blog post here.

    Mango Bits

    There has also been a refresh of the Mango Bits that you can flash your phone with.  There are some new features inside this update, like native Twitter integration, you can take advantage of as well.  Head on over to the WinSuperSite for a breakdown on what is new inside this RC.

    The update is being pushed out to eligible devices as we speak.  You can also check for it manually by following these important steps:

    • Make a copy of the backup you took when you updated to the Mango Beta 2 pre-release and put it in a safe place, if it isn’t in one already
      Note: Make sure that you copy this backup and put it somewhere else; uninstalling Zune will auto-delete any backups previously taken
    • Return to Connect.Microsoft.com (we’re using the same program you were invited to join last month) and download the freshly posted files, which includes a new Zune client and a new UpdateWP executable
    • Head to the Control Panel and uninstall the Beta 2 software (Zune client and UpdateWP) and tools (WPSDK) that you installed last month
    • Install the new software and tools that you just downloaded from Connect
    • Fire up the new Zune client beta (4.8.2134.0) to check for the new update


    • Zune will then update your phone from 7661 to 7712



    AppHub Changes

    The Marketplace has been hard at work at updating the reporting features of AppHub as well as launching marketplaces in several new countries.  Some of these exciting features include:

    • Geographic expansion: publish to 19 new consumer markets, submit from 7 new developer markets and coming soon, expansion of markets for in-app advertising!
    • New private distribution options: developers can now privately distribute their apps using beta and targeted distribution options.
    • Enhanced application management: we’ve made a lot of additional improvements to how you manage and publish your application in the App Hub itself, in response to your feedback.

    I have seen an uptick in downloads for my own DoodlePad apps when the new markets when online.  You can see the spike in downloads in the chart below:


    It is important to point out however that you need to go into AppHub and select these new countries in order to be published to them.  By default your application will not be available in the new marketplaces unless you specifically tell it to be.  This includes apps that  previously selected “Worldwide Distribution” you will need to go back in and select worldwide again.

    Be sure to check out the official blog post here for all the details.

    Happy Coding!


Page 3 of 68 (272 items) 12345»