• DaveDev

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

    • 1 Comments

     

    Via DaveDev.net

     

    Overview

    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:

    ContactTab

    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.

    ContactForm

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

    ContactSent

    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.

     

    ContactEmailReceived

    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.

    PluginContactForm7

    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.

    ContactForm7

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

    ContactFormCode

    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.

    sendgrid2

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

    sendgridnew

    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.

    sendgridnew2

    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.

    sendgrid

    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.

    SendgridFree

     

    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.

    MailSMTP

    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.

    EmailSettings

     

    Conclusion

    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. 

    -Dave

  • DaveDev

    How to install cool, custom fonts (like PDC09) into Windows and use it in your Silverlight application (or even Microsoft Word)

    • 0 Comments

    Whether you are someone who leans more towards design or coding you have probably come across the need for some interesting fonts.  Typography is a fascinating area with a long history dating back to the origins of print.  When we look at creating an engaging user experience today we are often trying to make a connection with our audience.  We “empathize” with our users needs and look to invoke certain feelings.  Fonts can do that in amazing ways and its pretty easy to add them to your own applications.

    PDC09Font

    The Microsoft Professional Developers Conference (PDC) site has a great art section where you can download wallpapers, blog bling and the font that they used.  Maybe its because I’m such a video gamer but the font really connected with me and brought back memories of playing Wipeout and Star Trek.

     

    Installing the Font into Windows

    I keep a local folder in my documents directory of all the fonts I have found intriguing.  Most of these go into my applications or demos I do for that extra sparkle.  You can keep them anywhere you would like however I just find this method the easiest to use.  That way I can zip up all my fonts if I need to use them on a different machine.

    Fonts

    Adding a font to Windows is as easy as double clicking on the filename.  The Font Manager window will them pop up (Windows 7 is pictured) and you will be given some typography information as well as samples of the font at different sizes.  Just click the install button and windows will register the font for use.

    FontsInstall

    This means ALL windows programs will now have access to that font such as Microsoft Word.  Keep in mind that custom fonts are not required to include both uppercase and lowercase. The PDC09 font (it’s official name is Squared) only includes lowercase for example.  So don’t scratch your head when word tries to capitalize at the beginning of a sentence and you see invisible letters.

    WordFont

     

    Using the new font in your Silverlight application

    Now that we have made sure the font installed correctly it is time to add it to a Silverlight Application.  In this example I am opening up Expression Blend 3, adding a simple gradient to the default grid layout and creating a TextBlock control.  I then selected the newly installed squared font from the textbox text properties and added some colors I thought to be pleasing.

    Font-SL

    Keep in mind one of the amazing things about Blend is we are seeing in real time what our application looks like.  This means for Silverlight the artboard is being rendered in Silverlight.  While we are in design time it understands the selected fonts and displays them correctly.  However if we run the application you will notice something happens.

    SLFontEmbedding

    This is where a lot of people get tripped up.  The application compiled, the browser opened up and it looks nothing like what it did in my Blend design surface.  So what is up?

     

    Font Embedding - it’s all about the download size!

    It is important to remember one of the core design principles of Silverlight is a small download size.  Every time you add a resource such as an image, a font, or a video the initial the size of your application will increase.

    Luckily, Silverlight is really smart about this.  It gives you the choice of not only which Fonts you wish to include in your application but also which parts of those fonts (Uppercase, Lowercase, etc.) giving you even more control over the size of your downloads. To bring up this menu simply click on the Font Manager button in the TextBlock text properties.  As mentioned above the squared font doesn’t use any uppercase which is why you will see the “S” missing.  Blend tries to capitalize the first letter of all the fonts being listed. 

    SLFontSize

    You can see both the Font Manager button and the Embed checkbox (I circled it in red) in the artboard screenshot above.  Keep in mind you do not have to select which pieces of the font to use Blend will automatically include all subsets of that font for you.  It is only necessary to check off the Embed checkbox for the font to be included in your application.

    Once you click the checkbox two things will happen.  A new Fonts directory will be created in your application and the selected Font source file will be copied into it for you.

    SLFontsFolder

    Blend will then modify the XAML source for your TextBlock to point to the newly installed Font resources in your project.

    FontEmbedding2

     

    Looking cool with just a TextBlock thanks to Fonts!

    We are now ready to show off our finished product.  Running the application will now show a correctly displaying TextBlock with the selected square font.  Amazing how much of a difference fonts can make even on a plain piece of text.

    TheFinishedProduct

    This is a trick you can use in all of your applications moving forward whether it is WPF or Silverlight based Blend and Fonts have got your back.

    Want more information like this?  The Microsoft Professional Developers Conference is coming up in less than 3 months! 

    PDC09Register

    If you register by September 15th you can also save $500 bringing the cost of a ticket down to only $1,595.  Be sure to check out the PDC site here for more details.

    Bookmark and Share

  • DaveDev

    “The application could not be started.” error when debugging a Windows 8 Metro Style App

    • 0 Comments

    I ran across this today and wanted to share the fix.  I have seen it crop up both XAML/C# and HTML/JS projects and has to do more with how the app is registered. 

    The error appears when you attempt to debug your Windows 8 metro Style App you will be prompted with a dialog informing you the application could not be started.

     

    UnabletoStart

     

    Clicking on Yes for more information will show you the id of the Metro Style App and point you to the Debug->Windows->Output window.  Unfortunately looking in the Output window doesn’t give you much information either.

     

    AppID

     

    The goods news is the fix is simple!  Simply exit out of Visual Studio 11 Beta and navigate to the solution file of your project.  Once there delete everything inside of the bin folder.

    Binfolder

    Then open the project back up in Visual Studio 11 Beta and it should deploy correctly for debugging!

    -Dave

     

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

  • DaveDev

    Announcing the MetroGameKit – a free, sample, starter project for Windows 8 Casual Games using HTML5 and JavaScript

    • 0 Comments

     

    spacecadet   Pew Pew! Fire Lasers!

    During the past couple of months I’ve been hacking around in the world of HTML5 Canvas and casual gaming.  The community that has formed up around HTML5 Gaming in particular is awesome and I am continually impressed by what I’ve seen.

    Not to mention I’m a big retro gaming fan – 8 bits anyone?

    With that in mind I wanted to contribute back to the community if I could.  I figured the best way I could do that was to take the experience I have writing Windows 8 Metro Style Apps and combine them with the world of HTML5 Canvas based gaming.

    Things were super easy to bring over from a code perspective.  All of my layout is done through CSS3 (including media queries for ViewState), the game loop is straight up HTML5 Canvas with requestAnimationFrame, the music uses HTML5 Audio Tags, and the sounds use third party JavaScript libraries like SoundJS.

     

    Get the Code

    You can grab the sourcecode from Codeplex here:

    CodePlex


    Or GitHub here:

    GitHub

     

    Summary

    I am replicating all the source back between GitHub into Codeplex so regardless of where you fork you will always have the latest source.

    If you decide to write 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:

    Happing Coding!

    -Dave

Page 4 of 68 (272 items) «23456»