In my article “So You Want A Larger Upload Limit Eh…” I walk you through the process of creating a custom php.ini file so that you could modify the upload limit for your server; essentially overriding the default values set by your hosting provider.  Your custom php.ini file is a copy, originally based on the php.ini file installed as part of your server’s setup for its default PHP version, and as such, you could run into serious problems if you decide to use another PHP version.

The reason for this being that your custom php.ini copy may contain configuration paths, extensions and other settings that are not suitable for a PHP version that gets chosen down the line.  It’s even possible it could be missing settings required by the new PHP version entirely.  That would not be good!

An example of problems that can arise between PHP version changes is as follows:

PHP 5.2: extension_dir=”/usr/local/lib/php/extensions/no-debug-non-zts-20060613″
PHP 5.3: extension_dir=”/opt/php53/lib/php/extensions/no-debug-non-zts-20090626″

Notice in the above example that the server path that is used for extension modules is different between PHP 5.2 and PHP 5.3.

If you are working with a custom php.ini copy to modify your hosts default PHP configurations, make a note of any modifications that you have made and then delete the custom php.ini copy you created along with it’s corresponding suPHP_ConfigPath pointer (if applicable, not all servers require this portion), located in your primary .htaccess file prior to implementing a PHP version change!

While working on the new fancy shmancy designFox.co layout (I know, I know, it’s been a work in progress for awhile. What can I say, I’m a bit of a perfectionist  >.>  <.< ) I decided to go back and review Browser Window Sizes and Screen Resolutions.

If you’re sitting there thinking “Why the heck did you do that, you know that 960 is the way to go!”  you’re not alone… I did to.  Then I thought, balls I’m going to just review it anyway.

Anyone who knows me knows that I’m a huge advocate of using the 960 grid layout for designs, it’s just the magical number or so it seems (you can read more about this here: 960 Grid Layout and Photoshop Templates Guide ).

The one thing that I can’t stress enough is that Screen Resolution is NOT the same as your Browser Window Size!

I bet you’re raising a questioning eyebrow at me right about now eh?

While I’m not about to say that Screen Resolution does not factor into the equation here, when creating a layout for a design what we really need to look at is Browser Window Size; that right there friends is the key.

The difference between the two is that Browser Window Size looks at how large your browser window is when it’s open on your screen vs. the overall resolution of your screen.

I’m going to throw myself into an example for you.  I run dual monitors (f.y.i dual’s are a godsend!), one is a 23″ LED and the other is 22″ LCD.  I constantly have multiple windows open (usually like 6+).  Typically I have both Google Chrome and Firefox browsers open (sometimes even IE) and am toggling between all my windows.  The thing to note is that even though I have large monitors with high resolutions, I don’t view my browsers full screen.  The majority of individuals likely don’t either, since they are probably toggling between various windows/programs.

In all actuality I probably have my Browser Window Size open usually in the range of 1200 – 1400px.

Chris Coyier wrote an article that discuss’s this very subject, as well as how to track it on your own sites if you wish.  His articles are quite insightful!  Follow the link if you’re interested in seeing that info:  http://css-tricks.com/9778-screen-resolution-notequalto-browser-window/

I know, holy crap right.  If all this info is correct, why are we not designing on grids with larger widths.  It’s really going to come down to each individuals comfort level when it comes to expanding past the 960 point.  Just keep in mind that 960 won’t be dominate forever.

Based on all the above, personally, I will be testing my next layout on an 1140px grid, I quite honestly cannot see why on earth I would not.  If you’re about to ask me why 1140… it just seemed like a logical number.

Now I have a treat for you… I’m about to share that grid!  Actually 3 grids! Whoop Whoop!

These grids are based on the way the 960 grid is laid out.  For me, I like the space of using 30px margins (15px left/right) over 20px (10 left/right) since it feels like there’s more breathing room.  However don’t dispair, I created a 20px (10 left/right) for those that prefer that instead.

Download the new grids here (PSD format): 1140 Grids (53)

Below is a brief description on each grid.  You might want to read them!

1140 Grid:  An 1140px 12 column grid with 15px left/right margins.  Essentially this means that the direct width of the columns themselves will only be 1110px.

*Note:  The 1140px grid using 15px left/right margins can be created using the following grid setups (I started at 4 columns and only went up to 24 if applicable):  4 cols (255px wide), 6 cols (px wide), 10 cols (84px wide), 12 cols (65px wide), 15 cols (46px wide), 19 cols (30px wide) and 20 cols (27px wide).

1140 Grid v2:  Technically an 1170 13 column grid with 15px left/right margins.  This means that the direct width of the columns will be 1140px.  So for those that don’t like those left/right margins on the far edges can take advantage of just the columns.

*Note:  The 1170px grid using 15px left/right margins can be created using the following grid setups (I started at 4 columns and only went up to 24 if applicable):  5 cols (204px wide), 6 cols (165px wide), 9 cols (100px wide), 10 cols (87px wide), 13 cols (60px wide), 15 cols (48px wide) and 18 cols (35px wide).

1140 Grid v3:  An 1140px 12 column grid with 10px left/right margins.  This means that the direct width of the columns will be 1120px.

*Note:  The 1140px grid using 10px left/right margins can be created using the following grid setups (I started at 4 columns and only went up to 24 if applicable):  4 cols (265px wide), 5 cols (208px wide), 6 cols (170px wide), 10 cols (94px wide), 12 cols (75px wide), 15 cols (56px wide), 19 cols (40px wide) and 20 cols (57px wide).

“Somefile has failed to upload due to an error.  Sorry, this file type is not permitted for security reasons.”

If you’re like me, you probably saw that and heaved an exasperated sigh.  @_@  LOL

The quickest way to work around this is to add those needed file extensions to your current theme’s function.php.  Navigate to this file, open it and add the following snippet (you can add/change the extensions to suit your needs):

function addUploadMimes($mimes) {
     $mimes = array_merge($mimes, array(
                                        // Adobe Extensions
                                        'psd' => 'application/octet-stream',
                                        'ai|eps' => 'application/postscript'
                                        ));
     return $mimes;
     }
    add_filter('upload_mimes', 'addUploadMimes');

*Note:  If you have more than 1 extenstion to add that shares the same mime-type you can seperate them using a pipe ( | ).  (i.e. ‘ai | eps’  shown in the snippet above)
If you’re not sure what mime-types go with certain extensions you can reference:  MIME TYPES

Eazy Peazy Lemon Squeezy!  Happy uploading!

UPDATE (08-22-2011):  Adding Custom Media Type Icons!

WordPress can use media icons to represent attachment files on your blog and in the Admin interface, if those icons are available. It looks for image files named by media type (e.g. the icon for the media type audio would be audio.jpg or audio.png) in the directory: wp-includes/images/crystal/.

By default WordPress has 8 groups of media types (audio, video, document, spreadsheet, interactive, text, archive, code), each one covering a variety of extensions with their own icon in the directory listed above.

When you used the above snippet to add your own custom extensions, unfortunately, it didn’t attach an icon with it.  The reason for this is because WordPress looks for an icon named after the extension you added in wp-includes/images/crystal/ and there isn’t one.

There are 2 ways to fix this. The first is upload your missing media icons (in the case of this article it would be psd.png, ai.png, and eps.png) directly to the wp-includes/images/crystal/

Or, if you don’t want to mess with your core files, then open up your theme’s function.php and right underneath the code snippet already given add the following:

* IMPORTANT NOTE: Be sure to change the directory stucture /images/media-icons/ to the folder you will place your attachment icons in (you will need to create this directory!).   Be aware that when using this method you will also need to either copy the audio, video, document, spreadsheet, interactive, text, archive, and code icons from wp-includes/images/crystal/ to that new directory or add your own that correspond to those titles.

add_filter( 'icon_dir', 'my_theme_icon_directory' );

    add_filter( 'icon_dir_uri', 'my_theme_icon_uri' );

    function my_theme_icon_directory( $icon_dir ) {
        return get_stylesheet_directory() . '/images/media-icons';
        }

        function my_theme_icon_uri( $icon_dir ) {
            return get_stylesheet_directory_uri() . '/images/media-icons';
            }

Your new full snippet should now look similar to this:

// add mime types and custom icons!

function addUploadMimes($mimes) {
    $mimes = array_merge($mimes, array(
                                       // Adobe Extensions
                                       'psd' => 'application/octet-stream',
                                       'ai|eps' => 'application/postscript'
                                       ));
    return $mimes;
    }

    add_filter('upload_mimes', 'addUploadMimes');

    add_filter( 'icon_dir', 'my_theme_icon_directory' );

    add_filter( 'icon_dir_uri', 'my_theme_icon_uri' );

    function my_theme_icon_directory( $icon_dir ) {
        return get_stylesheet_directory() . '/images/media-icons';
        }

        function my_theme_icon_uri( $icon_dir ) {
            return get_stylesheet_directory_uri() . '/images/media-icons';
            }

Now if you were to upload a PSD it would display in your media library with a PSD attachment icon!

Have you ever tried to upload a file directly from your site but couldn’t because the file was to large?  Does it leaves you grumbling and shaking your fists.  Don’t worry, you’re not alone.

Mercifully there is a 3 step process to get around this, shown below, and the best part is we’re going to walk through it!

1. Create a php document and call it getphpinfo.php
2. Create a php document and call it gettheini.php
3. Modify or create an .htaccess file

While I always encourage following along and creating your own files to get a feel for the process, below is a .zip that has them pre-made.
*Remember you’ll still need to modify the files accordingly with your server values.  Also you will need to rename the htaccess.txt file in this .zip to .htaccess

Click Here to download.

Many hosting providers have updated their servers to run PHP5 in conjunction with PHPSuExec enabled.  Due to this configuration users are no longer able to have php flags in their .htaccess file (which was an alternate method of increasing the file upload size).  Placing PHP flags in .htaccess files is now a common cause of internal server errors on servers with PHPSuExec enabled.

If you have a website chances are you have shared hosting with your provider.  What this means is that multiple individuals share your server and resources.  As such, it’s normal for hosting providers to set a low limit on PHP file upload size.  It’s probably anywhere from 2M – 10M (M = Megabytes).  This probably wouldn’t affect the average user, because you can still upload large files directly to your server via FTP.

What happens though, if you don’t want to upload those large files via FTP? What if you wanted to let your users use a web form or script of some sort to upload large files to you directly from your site?

That’s an excellent question! The answer is you can’t.  Not without a bit of modification.  There are pre-existing settings that control those file size definitions as well as other PHP settings in a file called php.ini.  Some hosting providers give you access to this file and some do not.

Hark!  you cry,  I don’t have access to this file! How do I increase my upload limit?!?! ZOMG I neeeeed this!

Never fear! We are going to walk through how to get around this by creating a custom php.ini file.  Are you ready? Let’s do it!

STEP 1.  *Create a new PHP document. Name it getphpinfo.php, add the snippet below and then upload it to your root directory:

*Note: This step is optional.  It’s only necessary if you don’t know where your default php.ini file is located or if you’re unsure of your direct path to your root directory .  If you already know this information you can skip this.

<?php phpinfo(); ?>

STEP 2. Create a new PHP document. Save it gettheini.php, add the snippet below and upload it to your root directory:

<?php system("cp /usr/local/lib/php.ini /home/YOURUSERNAME/php.ini"); ?>

*Note:  If you’re not sure of the value to enter for where your default php.ini file is located on your server this is where your gettheinfo.php file comes in handy.  In your browser navigate to www.yoursite.com/getphpinfo.php  this will display all the PHP configurations for your site.  The path you need should be under a section called Loaded Configuration File.  Replace /usr/local/lib/php.ini in the snippet above with the path listed under that section.

The second part of the above snippet /home/YOURUSERNAME/php.ini is defining where a copy of the default php.ini will be created.  If you’re not sure what the value of this direct path is you can once again navigate to www.yoursite.com/getinfophp.php in your browser and look for a section called DOCUMENT_ROOT under Environment.  Replace /home/YOURUSERNAME/ with the path found under that section.  This will copy the default php.ini to your root directory.

<!– IMPORTANT–> The safest way to do this is as described in Step 2. where you create a copy of your server’s existing php.ini and modify that.  If you just create a new custom php.ini from scratch and add only the things you want changed (i.e. max_filesize) you run the risk of overriding all the default php modules and settings that some of your scripts may need to function! <!– IMPORTANT –>

In your browser navigate to your gettheini.php file (i.e www.mysite.com/gettheini.php); running this script will generate a blank or white screen but don’t worry that’s normal! Now go to your root directory (or wherever you told your script to copy the php.ini file) and you will see your copy of the php.ini file. Huzzah!

*Note:  Some hosts may disable certain PHP Program Execution Functions such as system() and passthru(). You will know when this happens as you will see a message like the following:

Warning: system() has been disabled for security reasons in /home/USERNAME/public_html/gettheini.php on line 1

Since we use system() in our gettheini.php file, if you’re receiving this error open your gettheini.php and replace <?php system(  with <?php exec(   (In some instances you may have to try shell_exec.)

Open this php.ini file in your editor of choice, find upload_max_filesize (mine is located on line 487 but yours might be different)  and change the value to suite your needs.  (i.e. upload_max_filesize = 20M) and then save.

<!– IMPORTANT –> Change the permissions on this new php.ini file to 644! <!– IMPORTANT –>

While the above does change the upload limit allowed by your server, scripts using PHP and POST data to determine the max file size the script will allow to be uploaded, such as WordPress (WordPress default restriction is something along the lines of 10MB), need an extra step.  In your php.ini file find post_max_size (approx. line 373) set this to something like post_max_size = 20M.  If, for example, you use WordPress, once you make this change, click “Add New” under “Media” in your WordPress admin, it should now say something like “Maximum upload file size: 20MB” (or whatever you set it to).

Right on rockstar! You’ve just increased your PHP upload limit but we have one more step!

STEP 3. Create an .htaccess file, add the following snippet and upload it to your root directory:

*Note: If you already have an .htaccess file then you can simply modify it.

<Files php.ini>
order allow,deny
deny from all
</Files>

SetEnv PHPRC /home/USERNAME/public_html/php.ini

You might be thinking What the earth is that stuff doing? o_0

Weeeeeeell let me tell you!

In this guide we created a custom php.ini file by copying our server’s default one.  However we don’t really want any prying eyes to be able to view that new file.  The first portion of the above snippet handles this.

Additionally, when creating a custom php.ini file the changes will only be effective on scripts in the same directory it was placed in.  We want to make our new php.ini recursive (apply to all sub directories as well).   The second portion of the snippet SetEnv PHPRC /home/USERNAME/public_html/php.ini says “hey! Apply all the configuration values from php.ini to all subdirectories of where you placed me (me = .htaccess file) in!”

Success!  You be finished!  Go ahead and delete getphpinfo.php and gettheini.php from your server.

Update – 09/29/2011

• some hosts may disable certain PHP Program Execution Functions.  Added *Note reference to Step 2 on how to adjust gettheini.php script to accomodate this issue.
• Known Hosts this issue occurs on:  HostPapa – By default HostPapa disables the following functions: dl,passthru,proc_open,proc_close,system,allow_url_fopen.  Once you create your custom php.ini file you can remove some of those functions by deleting them; found around line 199 (If you don’t know what these functions do I would only suggest possibly deleting out system and passthru).

Update – 08/22/2011

• post updated to correct typo in .htaccess snippet. Removed the blank space found on the line order allow, deny that was causing internal error messages.
• post updated to add reference for post_max_size (found before step 3). This is required for scripts (not the server) using PHP and POST data to determine the max file size allowed to be uploaded through the script itself; such as WordPress.

To download the full example Click Here

*As a quick note this article is separated into 3 pages, to get the full extent of the article be sure to read through them all following the page links at the bottom.

Before we start some might be wondering what a Captcha is. This description is taken directly from the reCAPTCHA website.

“A CAPTCHA is a program that can tell whether its user is a human or a computer. You’ve probably seen them — colorful images with distorted text at the bottom of Web registration forms. CAPTCHAs are used by many websites to prevent abuse from “bots,” or automated programs usually written to generate spam. No computer program can read distorted text as well as humans can, so bots cannot navigate sites protected by CAPTCHAs.”

The overall process of adding reCAPTCHA is fairly simple, however the tricky part is figuring out how to redisplay the form to give the user another attempt at the captcha if they get the validation wrong.  Unfortunately there’s not a set answer for how a person can do that. It all depends on the structure of your existing code.

This article assumes that your form has no prior validation; meaning if a user clicks on submit it always succeeds.  That being the case you’ll have to add the reCAPTCHA validation code directly before any existing form handling code does whatever you’ve defined it to do when your users submit (i.e. sending the contents of the form to a defined email address).

Let’s Get Started!

Step 1: Create Our Basic Site Files & Structure (If you already have your core site files then disregard this step.)

While this step is technically not part of adding reCAPTCHA, I am including it.  If you want to follow this tutorial from ground up then keep reading.

I am a firm believer in exceptional site structure/folder hierarchy, so that being said the first thing that we want to do is create 2 folders, 1 called css and 1 called includes.  Our css folder will hold the stylesheet related to our pages and the includes folder will hold additional PHP files we will be creating.  If you don’t want to call your folder includes feel free to name it something that is logical to you.

Create a page called contact.php (this will be placed in your website’s root folder) and paste the following code into it (this is just a simple page with minimal styling to give you a general idea):

<!DOCTYPE HTML>
<html>
 <head>
 <meta charset="utf-8">
 <title>PHP and reCAPTCHA Demo Page</title>
 <meta name="description" content="" />
 <link href="css/main.css" rel="stylesheet" type="text/css">
 <!--[if lt IE 9]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
 </head>
 <body>

 <div id="wrap">

 <h2>Contact Form With PHP &amp; reCAPTCHA Validation</h2>

 <section>

 <form method="post" action="includes/processor.php">//The action="" will take the user to the processor.php page when they click submit.

 <fieldset>
 <legend>Your Name:</legend>
 <input name="name" type="text" />
 </fieldset>

 <fieldset>
 <legend>Your Email:</legend>
 <input name="email" type="text" />
 </fieldset>

 <fieldset>
 <legend>Phone:</legend>
 <input name="phone" type="text" />
 </fieldset>

 <fieldset>
 <legend>Type your comment or inquiry here:</legend>
 <textarea name="comment" id="comment" cols="45" rows="5"></textarea>

 <input type="submit" id="submit" name="Submit" value="Submit" />
 <input type="reset" id="reset" name="Reset" value="Reset" />
 </fieldset>

 </form>

 </section>

 <footer>

 <p>Simple reCAPTCHA &amp; PHP Demo By <a href="www.designfox.co" target="_blank">designFox</a>. 2011.</p>

 </footer>

 </div>
 </body>
</html>

Next we are going to create our css file to give our page some basic styling.  Create a new CSS file, call it main.css and save it into your CSS folder.  You can copy the following code and paste it into your CSS document:

@charset "UTF-8";

/* HTML5 - required for the HTML5 tags used in the demo files*/
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }

/* GENERIC ELEMENTS */
body { margin: 0; }

/* BASICS */
#wrap {
 width: 960px;
 margin-right: auto;
 margin-left: auto;
}
#wrap h2 {
 text-align: center;
}
#wrap section form {
 width: 600px;
 margin-right: auto;
 margin-left: auto;
}
#wrap footer p {
 text-align: center;
}

Our final step is to create the file that processes our form data when a user clicks submit.  In this instance we are going to have the form data emailed to us and then display a “Thank You” message.  This  will all be done with PHP on a single page so we are  going to create a new file called processor.php.  Remember that handy dandy includes folder we created earlier? We’re going to save this new file it into that folder. Copy and paste the following info into your processor.php:

<!DOCTYPE HTML>
<html>
 <head>
 <meta charset="utf-8">
 <title>PHP and reCAPTCHA Demo Page</title>
 <meta name="description" content="" />
 <link href="css/main.css" rel="stylesheet" type="text/css">
 <!--[if lt IE 9]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->
 </head>
 <body>

 <div id="wrap">

 <h2>Contact Form With PHP &amp; reCAPTCHA Validation</h2>

 <section>

 <h2>Thanks For Your Inquiry.</h2>

 <p>Thank you for contacting us.  We will be in touch shortly.</p>

 </section>

 <footer>

 <p>Simple reCAPTCHA &amp; PHP Demo By <a href="www.designfox.co" target="_blank">designFox</a>. 2011.</p>

 </footer>

 </div>
 </body>
</html>

I bet you’re thinking, “Hey!  That’s just the html bits. Where’s the PHP part?”

It’s coming I promise.  Add the following piece of PHP code at the very top of your processor.php page:

<?php

$to = "some-email@some-email.com";
$subject = "Contact Request From Contact Form";
$message = "Name:" . $_POST['name'] . "\r\n" .
"Email: " . $_POST['email'] . "\r\n" .
"Phone Number: " . $_POST['phone'] . "\r\n" .
"Comment or Inquiry: " . $_POST['comment'];
$from = $_POST['email'];$headers = "From: $from" . "\r\n";

mail($to,$subject,$message,$headers);

?>

Now, if a user clicks submit on your form, all that information will always be emailed to the above defined email address.  Peeeeerfect! Well… sort of… we know that without validation we have now opened ourselves up to be susceptible to spam.

There is no cut and dry way to address this, we could add Spry Validation (There are built in behaviors in Dreamweaver for this specifically, and anyone who knows me knows that I am definitely not a fan of those.), we could use JavaScript, we could even expand on our PHP processor to have it validate specific fields.

However, as this tutorial says we are going to be adding reCAPTCHA validation.  Huzaaaaah!

I thought I would share this so that it saves anyone else wanting to do the same thing the time of digging through interwebz articles.

Before I begin, I’m going to work through this on the assumption that your sidebar is already widget capable.  That being said, in your WordPress theme find your single.php, page.php, index.php and any other custom page/post files you may have. Open them and look for:

<?php get_sidebar(); ?>

Replace that with the following:

<?php if (is_page()) {
// We’re on a “page”, which?
if (is_page(‘insert your own page id or page name here’)) {
// Ah, the “blank” page!
get_sidebar(name of your custom sidebar);
// Oooh, grab that custom sidebar
} else {
// If we’re not on the “blank” page(s)
if(!get_post_meta($post->ID, “noSidebar”, true)) {
get_sidebar();
}
}
};
?>

So if you’re sitting there with an expression that says “wuuuuut be that? o_O” let’s break it down.

In case you’re not sure, the very first function, the one you’re wanting to replace, <?php get_sidebar(); ?> calls the file named sidebar.php located in your theme files, and you guessed it! It’s responsible for the sidebar on your site!

Got it? Good! Now for the shiny bits! (you like shiny’s right? cuz I sure do. oooooooo)

When you look at the second block of code, the first thing to notice is the section <?php if (is_page()) { what this is doing is saying “Hey WordPress, before you display the sidebar lookey at me!” followed up with a “I’m on this page!” which you will see defined as if (is_page(‘insert your own page id or page name here’)) {

*Note: you can insert the name of your page (i.e. Sample) or the ID of the page itself; both values are accepted.  I prefer to use my page ID, just in case for some odd reason I change the name of my page I then don’t have to go back and adjust my code.

Alrighty, so we have the attention of WordPress… but now what…

You tell that beast what trick it’s gonna preform that’s what!  KACHSSSH *WHIP NOISE!*   o_O

No but seriously we are going to tell it what to do.  LoL.  This next line get_sidebar(name of your custom sidebar); is saying “WordPress, ooooh WordPress, I already told you I’m on this page so display this sidebar. Kthx!”

*Note: In order for WordPress to display the sidebar you define, (i.e. get_sidebar(custom); ) you need to create that file. The easiest way to do this is to duplicate your sidebar.php file and rename that duplicated file to sidebar-nameofyourcustomsidebar.php  (i.e. sidebar-custom.php).  The get_sidebar function looks for a sidebar file with the extension that you define.  So just to re-iterate the extension of your new sidebar file needs to match what you place in your get_sidebar(name of your custom sidebar); code.

So if right now you’re like “Rock on! I gots me a slick custom sidebar for a specific page but what does that rest of that gobbledy-gook do?”

Oh ho ho! Let me tell you!

The next portion of our code is } else { the key there is the Else part, it’s saying “I’ve told WordPress what page to place the custom sidebar on but if it’s not that page then I need to do…”

You could neatly follow this up with get_sidebar(); Notice how there is no custom sidebar extension defined? What this means is that WordPress will load the standard sidebar.php file.

However,  it’s fun to go that extra step in case it’s needed, and heck, what’s another line of code or two between developers eh?

Before we end with get_sidebar(); on our line prior to that you see  if(!get_post_meta($post->ID, “noSidebar”, true)) {

For those that don’t know, you’re eagerly waiting to learn what that does right?  Well your patience shall be rewarded my Padawans!

What we did there was set up a Custom Field.  I’m not going to get into a detailed explanation of custom fields but essentially what we are telling WordPress is if you assign a Custom Field with a name of noSidebar in your page/post (via the WordPress control panel) and set the value to true, that page/post will NOT display a sidebar (it essentially hides it).

Holy Cannoli’s Batman! Our article has come to a close and you should now be able to add different, dynamic sidebars to different pages in addition to the default sidebar AND with the option to “hide” the sidebar!

Did you know that Firefox, Chrome, Safari and Opera all are able to use HTML5? And yes I mean today! Studies have shown that users of the above browsers are quicker to upgrade to the newest versions of those browsers so there is little worry about old versions that could kick back odd issues.

This leaves Internet Explorer, the Dreaded Blue “E” Beast.  It does not currently (as of IE 8 ) support the new HTML5 tags; otherwise known as markup.  Doesn’t it make you just want to kick it in it’s ugly blue E face? I know it sure does for me!

Don’t worry; all is not lost!  Internet Explorer doesn’t realize it can recognize the new tags, but it can, you just need to hold it’s hand (watch out for it’s teeth, the little monster can bite!) and nudge it in the right direction a little bit by adding what’s called a JavaScript shiv to your pages. You would place this in between your <head></head> tags and it would look something like this:

<!–[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> <![endif]–>

In the above example, as you can see by the <! –[if IE]> (otherwise known as a conditional statement) it is only targeting Internet Explorer specifically.  It’s also hosted by Google, so it eliminates you having to host the script, although you may do so if you wish.

[note]*Note:  Internet Explorer 9 is currently in Beta stage and will not require the use of the shiv.  IE 9 will have support for HTML5 and CSS3 (keep in mind that it is not going to be full support as HTML5 is still a draft). HOO-AH!  Once IE 9 is released if you choose to continue support for older IE browsers you would change the shiv conditional statement to [IE lt 9].  This means the shiv will target IE browsers prior to 9.  Please be aware that when IE 9 does launch it is not scheduled to be available for Windows XP, Developers need to know that they should still support at least IE8.  Personal preference will dictate if developers will continue on with support of IE 7 and IE 6.  I am of the opinion to educate rather than enable when it comes to this matter.[/note]

This work-a-round to get IE to recognize HTML5 markup has both good and bad sides.  The good is that you can now effectively use and style HTML5 elements in Internet Explorer, the bad is that you are relying on JavaScript for your pages that are being rendered by Internet Explorer.  Many web developers feel that if JavaScript is required to make a browser understand markup, it crosses a line.

It is my personal opinion that if you want to stay a step ahead, to be part of the progress of the web world as it moves forward instead of hindering it, you need to be open to new methods instead of being a crutch that enables.  We need to loosen our white knuckled grip on our security blankets and embrace the advantages that new technology has to offer.  In addition the use of JavaScript and JavaScript libraries (i.e. jQuery) have become so commonplace (I doubt that you can open up a single page, view source and not find some type of JavaScript) that it is rare to find users that have JavaScript turned off for their browsers.  While I do believe that graceful degradation where necessary is a good idea for individuals running some type of JavaScript, this can lead back to the debate about not supporting antiquated browsers and instead educating individuals on upgrading or other browser options.

Another example to support my position of pro HTML5 is that many developers that wish to support older Internet Explorer browsers (more specifically IE 5.5 & 6, god only knows why) that use PNG’s in their layouts also use a PNG fix.  This can be achieved via either JavaScript or CSS, but regardless of the method, you are essentially forcing a browser to do something that it does not natively do.  Yet we still do it without a second thought, so why would adding an IE conditional shiv.js for HTML5 be any different.  (This runs along the same lines as the HTML5 and CSS 2.1 reference earlier.)

Forge the path, don’t be content to just walk the existing one!

All that being said, for those that don’t want to go as far as including the IE shiv, but want to start including some HTML5 cross-browser techniques (there are loads of these, and yes, they are compatible in IE also) a short list would include elements such as:

1)   Change your doctype: <!DOCTYPE html>
(Simple right! View source Google and see that they are already implementing this)

2)   Block Level links:
<div class=”article”>
<a href=”link.html”>
<h3>This is a header</h3>
<p>This is some content<p>
</a>
</div>

[important]*Notice how the <a> element is wrapped around both the <h3> and <p> tags instead of each tag having it’s own individual link to the link.html page, this is block level linking.  This prevents duplicate links and creates a much wider hit area for a user to click on.[/important]

3)   Simplify your character set: <meta charset=“utf-8” />

4)   Use semantic names that represent the new HTML5 elements

[note]*Note: Also understand that you don’t have to use HTML5 exclusively.[/note]

If you are still hesitant and feel you are not quite ready to dip your toes into the exciting waters of HTML5 that’s ok.   However, you can educate yourself on it and as per the above list get into the habit of using HTML5 names in your existing HTML4 markup.  An example of this would be:

<div id=”header”></div>
<div id=”nav”></div>

To summarize a few of the benefits of using HTML5 include:

1)   The addition of new semantic elements such as <header><nav><footer> that helps to reduce “div soup”
*Note: “div soup” is an overuse of div’s on a page.

2)   Your markup is cleaner.

3)   You’re being proactive about the future of web development by staying ahead of the curve shortly before HTML5 becomes the mainstream markup language.

The downfalls to using HTML5 now (as discussed earlier in the article):

1)   The spec is not finished and is likely to have some reiterations.

2)   Not everything will work in all browsers (However the same could be said of CSS, as mentioned earlier right? ^_~).

3)   The use of the Shiv.js is required to be included in a conditional statement to be able to style HTML5 elements with IE up to and including version 8.

Obviously, when and where you use HTML5, whether it is in personal or client work, is going to depend on the project itself and your own personal preferences.  There are numerous excuses on why someone wouldn’t choose to progress and adapt to a new technology, it may be simply because we are comfortable with the existing known and loved technology/methods and are not ready to see it replaced.  Be aware though that HTML5 is the future.

Hopefully this series of article has broadened your spectrum and got you really thinking about HTML5; it is happening and being added to browsers as you read, so closing your eyes and covering your ears singing “La La La!” isn’t really feasible anymore.  It’s not going to halt or stall, it’s going to continue to evolve and grow at a rapid pace.

Don’t get left behind!

“What… HTML5 now… No, No, No, you must be wrong! You’re absolutely WRONG! You can’t use it now, it’s a draft, and it won’t be ready until 2022! REDO ALL YOUR SITES YOU HAVE USED IT IN! YOU HAVE NO RIGHT TO USE THIS IN LIVE PRODUCTION WORK YET!”

That’s what I hear many developers, hackles up, shouting from the rooftops.  To be fair, 2022 is the date that has been linked with HTML5 in the design and development community, so I can relate to why people have that mentality, but really that date has no real significant meaning (for the web world) and is a misinterpretation of the year HTML5 would be ready.  A much closer and far more likely date is 2012, some even say sooner than that.  That’s only a year away, and guess what else? You CAN use HTML5 today!

What was the important date for HTML5 you ask; well it was October 2009.

“What?! 2009?! But that was 2 years ago!”

You are absolutely right, that time frame was the last call for the HTML5 working draft, basically what this means is that spec issues, bugs, enhancements and all the rest had to be submitted and written into the spec ! That being said there are downsides to implementing HTML5, one is that the spec is still subject to reiterations (even though the above date was the main deadline), and another is that it is not fully supported in all browsers yet. Keyword there… Yet.  (This is also another reason for pushing browser upgrades)

However, the same can be said about CSS 2.1 (I am positive as a web designer or developer you are in some way familiar with CSS and use it in your projects without ever thinking about if its complete).  CSS 2.1 has been “in development” for more than 10 years and as of April 2009 just became a candidate recommendation.  It doesn’t even have the full support of two browsers; the only browser that fully supports it is Internet Explorer 8.  (The switch to CSS 3 has also begun)

Aha! I bet you didn’t know that did you, if you knew that before would you have stopped using it? Will it stop you from continuing to use it now? Nope, it sure as heck won’t so why wouldn’t the same be said of HTML5.

[note]*Note: Spread browser love! Encourage people to update their outdated browsers.  If you’re a savvy interwebz user, educate people on other browser options. (Some people don’t know they have a choice, they assume the little blue E of death is the Internet!)[/note]

“Who? What? Where? Why? HOW?!” You exclaim. Well, let me show you some of that CSS voodoo that we…. doodoo!? LOL

I’m going to review how to create a CSS horizontal navigation. Lets get started shall we?

One of the first things I’d like to point out is there are a probably a million and one ways to create amazing CSS styled navigations, and there are loads of awesome tutorials on this all over the web.

When you create a CSS styled navigation menu all you are essentially doing is creating a list, after all, what is a navigation if not a list of links right?

Start like this in your html code:
<ul>
<li><a href=”#”>Item 1</a></li>
<li><a href=”#”>Item 2</a></li>
<li><a href=”#”>Item 3</a></li>
<li><a href=”#”>Item 4</a></li>
</ul>
You want to associate unique ids to your list and it’s elements to be able to style them separately, so now you have code that would look similar to this:
<ul id=”nav”>
<li id=”nav-1″><a href=”#”>Item 1</a></li>
<li id=”nav-2″><a href=”#”>Item 2</a></li>
<li id=”nav-3″><a href=”#”>Item 3</a></li>
<li id=”nav-4″><a href=”#”>Item 4</a></li>
</ul>
Still with me? Pretty simple right? So now lets add that magic ingredient, the CSS. We are going to use the power of CSS to style each link to its own button or bar image. To do this we are going to start by setting up the width and height for our list (or nav) and then removing the item bullets and telling our list to display it’s contents horizontal instead of vertical.

Deep breath! Ready… and… GO!
ul#nav {
height: 50px;
width: 600px;
list-style-type: none;
}
ul#nav li {
display: inline;
}
This next step is just to add the general rules for your links. We’re going to set their height and float them left.
ul#nav li a {
float: left;
height: 50px;
}
Phew! Alright, so now we need to style each individual link. I’m going to show examples for the link and for it’s hover state (when you move your mouse over the link). You can play around with adding different link states if you like.
ul#nav li#nav-1 a {
background-color: #666;
background-image: url(images/nav.jpg);
background-repeat: no-repeat;
width: 150px;
}

ul#nav li#nav-1 a:hover {
background-color: #0FF;
background-image: url(images/nav-hover.jpg);
background-repeat: no-repeat;
}
Excellent! You have successfully styled your first navigation link! Do this for the rest of your links using the li id’s you chose in your html code. Remember we used id’s nav-1, nav-2, nav-3, nav-4, it would look something like this:
ul#nav li#nav-1 a {
background-color: #666;
background-image: url(images/nav.jpg);
background-repeat: no-repeat;
width: 150px;
}

ul#nav li#nav-1 a:hover {
background-color: #0FF;
background-image: url(images/nav-hover.jpg);
background-repeat: no-repeat;
}
ul#nav li#nav-2 a {
background-color: #666;
background-image: url(images/nav.jpg);
background-repeat: no-repeat;
width: 150px;
}

ul#nav li#nav-2 a:hover {
background-color: #0FF;
background-image: url(images/nav-hover.jpg);
background-repeat: no-repeat;
}
VIOLA! We’ve reached the end of our little tutorial and you now have a functional CSS rollover navigation! (Keep in mind that you can set your own width’s, height’s etc as needed)

*ADDITIONAL NOTES*

I wanted to make a note that using JavaScript for your navigation to enhance it’s functionality is perfectly acceptable. This is usually done with a combination of CSS and a JavaScript library (such as jQuery) where the JavaScript coding is placed in it’s own .js file and then linked to your pages. As stated above you can find loads of useful tutorials on how to do that or create pure CSS navigation, like we just did above, online.

In addition I would recommend to anyone styling with CSS, to save their styles to a stylesheet and link that to their pages, not include all the CSS directly in your pages themselves. The reasoning behind this is because its easier to keep track of the styles used on each page if you ever have to change something and to reduce code bloat.

On a blank page this would look something like this (this example is not using HTML5 structure):
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<link href=”style/style.css” rel=”stylesheet” type=”text/css” />
</head>

<body>
</body>
</html>