The Fix

As previously mentioned the fix is actually quite simple. Just replace your ‘$’ variable with ‘jQuery. This is known as Aliasing the jQuery namespace” See the example below.

Before:

$(document).ready(function () {
$("p").text("Your Code");
});

After:

jQuery(document).ready(function () {
jQuery("p").text("Your Code");
});

How To:

To use this function to load jQuery, place this snippet of code in your template header file, before the wp_head() function. It’s that easy! Now as you update WordPress, your theme will then load the latest version of jQuery.

<br />wp_enqueue_script('jquery');<br />

The CSS

@-moz-document url-prefix() {
  #cssid {
     /*Firefox specific CSS here*/
  }
}

You don’t want that small string of text overlaying on the button.  You want it to look like this (Note: no more text overlayed):

Well, luckily the fix is simple.  I’ll paste the entire CSS code for the above button, and then highlight the specific changes for IE6 and 7

#search input.image-button {
    background: url("../images/images/magnify.png") no-repeat scroll 50% 50% #79868F;
    border-color: #9C9C9C #9C9C9C #9C9C9C #E4E4E5;
    border-style: solid;
    border-width: 1px 1px 1px 3px;
    color: #000000;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 0;
    height: 29px;
    line-height: 0;
    margin: 0 0 0 -2px;
    overflow: hidden;
    position: relative;
    text-align: left;
    text-indent: -9999px;
    text-transform: capitalize;
    width: 36px;
    z-index: 1;
}

Overall a straight forward CSS declaration, but here are the specific IE6 and 7 fixes:

• font-size:0 -  This is used to reduce the font size to 0 for IE7, with IE6 this doesn’t fully eliminate the text
• Display:block – Negative indents in IE will only work with this declaration
• line-height:0 – For IE6
• text-align:left – Another IE6 fix, right align doesn’t work.  I’m not sure why this is the case, another mystery of IE6

I hope this helps save you time as IE6 and 7 can be extremely frustrating and time wasting!  Let me know if you have any other tips in the comments!

The Form

First we will start by creating the markup for the form itself:

<form id="contact_form" onsubmit="return validate_form()" action="" method="post">
<div id="contact_form_content">
<label id="contact_name" for="name">Name:</label>
<input onfocus="$('#name_error').fadeOut('fast');" onclick="$('#name_error').fadeOut('fast');" type ="text" name="name" id="name" /><br/>
<label id="contact_email" for="email">Email:</label>
<input onfocus="$('#email_error').fadeOut('fast');" onclick="$('#email_error').fadeOut('fast');" type="text" name="email" id="email" /><br/>
<label id="contact_message" for="message">Message:</label>
<textarea onfocus="$('#message_error').fadeOut('fast');" onclick="$('#message_error').fadeOut('fast');" id ="message" rows="8" cols ="20"></textarea>
<img id="loader" src="ajax-loader.gif" alt="Processing" height="16" width="16"/>
<input id ="submit_button" type="submit" value ="Send" name="submit"/>
</div>
</form>

As you can see, the markup is fairly straightforward, but there are a few points to highlight.  Notice that the form’s action declaration is empty, instead we use the onsubmit event to do all of the work.  Finally you may be wondering why the inputs have both onfocus and onclick events.  Those two events are present simply for browser compatibility, namely IE has trouble with the onlick event.

The CSS

This portion is purely optional, but can offer you a foundation for styling the entire form.  Copy this CSS as you see fit:

body{
font-size:14px;
font-family: tahoma,geneva,arial;
background-color: #f2f2f2;
}
p{
text-align: center;
}
form{
width:426px;
font-size:1.4em;
margin: 0 auto;
position:relative;
}
form label{
float:left;
margin-right:40px;
text-align:right;
width:80px;
}
form input{
height:22px;
width:300px;
margin-bottom:10px;
}
textarea {
width: 300px;
}
#submit_button{
background-color: #CBDF6F;
border: 1px solid #9EB253;
cursor: pointer;
float: right;
font-weight: bold;
height: 31px;
margin-top: 10px;
width: 50px;
}
form .error{
background-color:#F2E9E1;
border:2px dashed #9EB253;
display:none;
font-size:0.7em;
font-weight:bold;
padding:4px;
position:absolute;
z-index:1;
}
form #name_error{
right: -89px;
top: -5px;
}
form #email_error{
right: -155px;
top: 34px;
}
form #message_error{
right: -111px;
top: 74px;
}
form #send_message{
left: 110px;
line-height: 2em;
padding: 10px;
text-align: center;
top: 40px;
-moz-box-shadow: 5px 5px 7px #AAAAAA;
-webkit-box-shadow:5px 5px 7px #aaaaaa;
box-shadow:5px 5px 7px #aaaaaa;
}
#loader{
display:none;
bottom: -33px;
position: absolute;
right: 65px;
}

Overall this is standard CSS code so I won’t go over the specifics.

Jquery

Here is the Jquery code.  Remember to have the latest version of Jquery (version 1.4.4 at time of writing) loaded in yourtag for this to work:

function validate_form(){
        var error = 0;
        $("#name_error").detach();
        $("#email_error").detach();
        $("#message_error").detach();
        if (document.getElementById('name').value =='' || document.getElementById('name').value == null){
            $('#name').after('<span class="error" id="name_error">Please enter your name</span>');
           $("#name_error").fadeIn('slow');
            error = 1;
       }
        var _regexp = new RegExp(/^([0-9a-zA-Z]([-.w]*[0-9a-zA-Z])*@([0-9a-zA-Z][-w]*[0-9a-zA-Z].)+[a-zA-Z]{2,9})$/);
        var _email = document.getElementById('email').value;
        if(_regexp.test(_email) == false) {
            $('#email').after('<span class="error" id="email_error">Please enter a valid email address</span>');
            $("#email_error").fadeIn("slow");
            error = 1;
        }
        if (document.getElementById('message').value =='' || document.getElementById('message').value == null){
            $('#message').after('<span class="error" id="message_error">Please enter your message</span>');
            $("#message_error").fadeIn("slow");
            error = 1;
        }
        if (error == 1){
            return false;
        }else{
            var name = document.getElementById('name').value;
            var email = document.getElementById('email').value;
            var message = document.getElementById('message').value;
            $("#loader").css("display","block");
            $.ajax({
                type:       "POST",
                url:        "/send.php",
                cache:      false,<br />
                data:        "name=" + name +"&email="+email+"&message="+message,
                success:    function(html) {
                    $("#loader").fadeOut('fast');
                    $("#submit_button").attr('disabled', 'disabled');
                    $("#contact_form").append('<span class="error" id="send_message">Your message has been sent!<br/>  We will contact you shortly</span>');
                    $("#send_message").fadeIn("slow");
                    setTimeout('$("#send_message").fadeOut("slow");',2250);
                }
            });
        }
return false;
}

When the user clicks the send button, the form triggers the “validate_form()” function.  This function starts by validating each input field.  It starts with the name field which simply detects if the field is empty or not.   Next we move onto the email field which we use a regex string to determine if the field was written in a valid email format.  Finally we check to see if the message field is empty.   As the function detects errors it will display a message over the respective field and halt the script.

Once the form has been validated we use the $.ajax() function to process the data to the php file which sends the message.  The $.ajax() function can be daunting at first so I will explain the settings used.  Starting with the “type” setting, this specifies how we are sending the data to the PHP file.  In this example we are using the POST method, however a GET request could used instead.    The following setting, url, specifies the location of the PHP file we are going to use to send the message.  Next we choose to disable caching as each use of the form will be unique.  We then move onto the data setting, this is where the form data is placed.  As you can see we send the data in the form of 3 variables, an array could also be used.   The last setting determines what to do when the message has successfully been sent.  The “success” setting is only triggered if the message is sent, otherwise the function stops.  Assuming everything goes through correctly, we fade in a message stating the success.  We also disable the submit buttons function to stop from multiple messages being sent at once.

The PHP

Finally we have the PHP code to finish everything off.  In our example we placed this code in the send.php file:

<?php
$name = addslashes($_POST['name']);
$email = "FROM: ".$_POST['email'];
$message = addslashes(nl2br($_POST['message']));
$to = 'info@tobstudios.com';
$message = "Name: ".$name."n".$message;
if ($name != '' && $email !='' && $message != ''){
   if (mail($to, 'Tob Studios Contact Form', $message, $email)){
       return true;
   }else{
       return false;
   }
}
?>

The PHP code is short and to the point, we take the data sent from the $.ajax() function and again validate the information (although in much less detail).  Assuming everything is valid, we then send the message using the PHP “mail” function.

Conclusion

This form albeit simple, offers you a solid foundation to add more complex features such as file uploads and other options.  Remember to put the “enctype=”multipart/form-data” code into your form declaration to process file uploads correctly.  Let us know your thoughts and ideas on how to improve this form in our comments section below.

As a new web designer it’s often difficult to choose which platform you’re going to develop with.  Do you use one platform for everything?  Or do you use a different platform for each project?  Truth be told, there is no correct answer.   In this article I will outline the tips and thought process’ Tob Studios used to determine its platforms of choice.   To begin with, Tob Studios typically uses two platforms, Drupal and WordPress.   For highly customized projects we tend to stick with Drupal, while simple project are done in WordPress.     As you may have guessed the Tob Studios website is built using WordPress due to is simplistic nature.  So how did we arrive at these platforms?  Below I will list the topics we took into consideration for our choices.

Ease of Use

One of the most important factors to use when choosing platforms was how easy they are to use.  Although more advanced platforms like Joomla and Drupal are fine for our use.  How will our customers react to them?   You’re most likely reading this for a project for a client and not for personal use.   A lot of the time the client isn’t completely technical, and they shouldn’t have to be.  The idea of choosing a platform is to make it easier for all parties to maintain the website.   Ease of use is an extremely important factor.  If you’re unsure if the platform is easy and intuitive simply ask a non-technical friend or family member to try and use the platform.  See how they react, if even with your helping tips they aren’t quite grasping the system, move onto a new one.  You may not agree with that statement but consider this.  If your client is struggling to update their website they are going to get frustrated as well as be contacting you more often for support.  I have yet to meet a single developer who enjoys doing phone support with a frustrated client.

Time Saving

Typically all platforms have some form of template/theme system.  The idea behind such systems is to allow you, the programmer, to make the website more quickly and efficiently.   By using a template system you can break up your web pages into smaller files, allowing common portions to be reused throughout the website.   Typically your webpage will have a similar header and footer for all pages, so you can create header and footer files which the template system will render onto all of your content pages.  That is the general basis behind a template/theme system, but how well did the platform implement it?   Some platforms complicate this theory while others are more easy to use.  When choosing your platform, if you plan on creating custom themes, look at how the template system is setup.  Is it easy for you to use and understand?  Will it save you time?  If the answer is no, then you should move on to another one.    Some template systems such as Smarty, use their own custom coding language, which adds a small learning curve but can greatly speed up your project.  A great way to find quick answers on the system is to do search the platforms forums to see what others are saying.

Support

The amount of support you have with a specific platform can be a life saver when you’re in a jam.   If you’re choosing a platform with a smaller user base it will be harder for you to find answers to the problems you will inevitably run into.   It’s extremely frustrating hitting a roadblock midway through a project and not being able to find an answer.  You’re then left with two options; do you scrap it and start over?  Or do you keep trying to find the answer yourself, which is often a time consuming decision.  Investigate the forums and communities of the various platforms; see how often they are updated and how busy they are.   Look at the support forums and see if questions are being answered or if problems are being posted without resolutions.  Do you want to risk using a platform that has very few answered problems and bugs?  Most likely not.  You want a system that has strong community support to help you out of that jam and hopefully stop you from being up at 3am.

Some premium platforms such as X-Cart and Expression Engine offer premium support from the developers themselves, which can be a great help when you need something fixed immediately.  If you’re working with a mission critical system or are not completely comfortable with programming, spend the extra money to get the better support.

Another aspect of support is server/hosting support.  If your platform can’t run on your hosting or server then it is pretty much useless.  Many platforms use the PHP language, so make sure your server/host can run PHP code.  Other systems run on different languages, sometimes less common with hosting providers.  Ruby On Rails and Django support is less common with shared hosting plans.   Will your client want to spend extra money on hosting to support those languages?  Does your clients project warrant the use of those languages or can you get the same results from a more common language?  Learn more about choosing a hosting provider in our “Find your hosting Provider” article

Extensibility

The extensibility of a platform is an important factor for some projects, but not all.  If you are to working on a fairly customized project you want to see how easily you can input your own code/plugins.  Many systems are very closed off so it’s extremely hard to add your own additions and changes, while others have greater extensibility.  An easy way to check is to see how many community made plugins there are available to download.  Although this isn’t a completely accurate method, it’s a good starting point.  Once more, viewing what plugins are available for your platform is a great way to save time in your next project.  Why reinvent the wheel when you can modify an existing plugin to fully meet your needs?    Many of the plugins available for projects such as WordPress, Drupal, and Joomla are open source and you can legally modify them for your project.

Conclusion

As you can see there are many aspects to consider when choosing a platform, this article only highlights a few.  A good tip to remember when choosing a platform is that the platform should work for you and your clients.  You want to choose a system that will make everyone’s life easier now and in the future.   These are some of the tips that Tob Studios used when determining the platforms we develop with.  There are other aspects that may impact your choice and we invite you to put them in our comments section.  We would be happy to hear them.

Finding a hosting provider can be a daunting task.  First you’ll find there are thousands of different hosts, with prices ranging from Free to hundreds of dollars a month.  What makes them different and which one is right for you?    For most people all they will ever need is the cheap 10 dollar shared hosting plans that companies such as Hostgator, Hostrocket and Bluehost offer.   With unlimited disk space, no monthly bandwidth cap, PHP, and MySQL support, these hosting packages will satisfy most customers.

What do I look for in a hosting provider?

As I briefly mentioned above there are a few key points to look for in your host.  How much disk space does your host offer?  How much bandwidth can you use monthly with the host?   What programming languages does the host support?  For many modern web projects that require a content management system, at minimum you will require PHP support as well as some form of database support such as Mysql.   If you’re simply creating a static xHTML web page that has no web based administration section, then PHP support would offer you little to no benefit.   One of the most important factors I look for in a host is how easily can we administer our hosting package?  Does the hosting company provide you with an easy to use administration panel allowing you to add files, databases and change various other settings?  Or do you have to call your hosting provider to make all of these minor changes?  A very common administration system among shared hosting providers is called Cpanel which gives you the ability to take control of many of your host settings.  Typically through the Cpanel, you can upload files, add and delete Mysql databases as well as change other setttings your provider allows.   Many shared hosting providers combine their Cpanel systems with One-Click install systems, allow you to install CMS and blogging packages right from your web browser.  If you are someone without a lot of technical knowledge, I recommend using a hosting company which uses Cpanel.

When working on an E-commerce project you have to take other things into consideration, security.  How secure is your hosting providers systems?  Although you may have your data encrypted on their servers, how secure are they?   Luckily there is a standardization that helps you determine if the hosting provider is secure enough.  When working on E-commerce projects you need to make sure your hosting package is PCI-compliant.  Although your web platform/CMS may be PCI-compliant, if your hosting provider is not, your just as unsecure.  Typically shared hosting plans are not PCI-compliant and you need to seek out dedicated hosting or co-locate your own servers.    Many credit card companies will not approve your applications or will close your accounts if you are not on a PCI compliant system.   If you’re processing credit card information on an unsecure host, your putting your customers and the credit card companies customers at risk.   Depending on the size of your project there are alternatives to spending more money on dedicated hosting or co-location.   If your company is only selling a few items you can use services like Paypal or Google Checkout to process all of the sensitive information.   Simply create an account with either service, follow their instructions to input your items and then finally paste the code they generate for on your website.  In this fashion your website remains on a more affordable hosting plan while all sensitive information is secured by the third party service.

Conclusion

There are many aspects to consider when choosing a host, however for the most part it is fairly simple.  You will find a plethora of fairly cheap hosting providers that offer unlimited disk space and bandwidth, as well as all of the features most websites.  However for specialized projects such as E-commerce implementations, you need to look for specific things in your hosting, usually increasing your monthly costs.   Some hosting providers that we’ve had great success with are Hostgator, Hostrocket, and Bluehost.   Do you have another host that you like?  Let us know in the comments section below.