1. In your WordPress admin dashboard, navigate to “Settings -> Permalinks”. Select the “custom structure” radio box and enter in:

   /%postname%/

2. For the .HTACCESS, copy and paste this in

   # Helicon ISAPI_Rewrite configuration file
   # Version 3.1.0.63
   
   Options +Followsymlinks
   
   RewriteEngine On
   RewriteBase
   RewriteRule /wp-(.*) /wp-$1 [I,L]
   RewriteRule /(.*)$ /index.php/$1 [I,L]
   RewriteRule . /index.php [L]

3. That’s it! Enjoy using Helicon ISAPI_Rewrite and WordPress Pretty URL’s.

Note: If this didn’t work for you, leave feedback to I can update the guide to better assist in different scenarios and environments.

If you’re like me and you’ve Googled your heart and and tried so many solutions and nothing works… maybe this post is for you.

Have you tried?

1. To reupdate to the newest version by browsing to http://{mysite}/wp-admin/upgrade.php and see “No update required”.
2. Changing your permalinks to just the default and temporarily rename your HTACCESS to see if you can pull a page.
3. Downloading the WordPress 3.1 ZIP for IIS  http://wordpress.org/wordpress-3.1.zip and reuploading the “wp-admin, wp-includes, and all the root WordPress files (with the exception of wp-config.php, .htaccess, etc)” http://codex.wordpress.org/Upgrading_WordPress_Extended.
4. Deactivating all your WordPress plugins, trying the site again, reactivating them, deleting them, etc.
5. Played around with your “Site URL” in the WordPress settings.
6. Reinstalling WordPress from scratch with a fresh brand new database and files.

AND NOT A SINGLE ONE OF THESE SOLUTIONS WORKED, AND YOUR FRONT END STILL IS A BLANK WHITE PAGE?

My Solution

1. Open “/index.php”
2. Replace

   require('./wp-blog-header.php');

   with

   /** Absolute path to the WordPress directory. */
   if ( !defined('ABSPATH') )
   	define('ABSPATH', dirname(__FILE__) . '/');
   
   require_once(ABSPATH . 'wp-blog-header.php');

3. That’s it.

Looks like IIS had a bit of trouble requiring the file using a path relative to the site root. Hopefully this solution works for you.

    RewriteEngine On
    RewriteBase /

    # this adds trailing slash
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_URI} !(.*)/$
    RewriteRule ^(.*)$ $1/ [R=301,L]

    # this gets rid of index.php
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php/$1

Instead of writing a comprehensive guide showing how to setup Doctrine 2 and CodeIgniter 2 together, I’m going to provide a breakdown and quick-start ZIP for those who are already aware of how to use both frameworks. A little bit of explaination, some SQL insertions, and a ZIP with well commented code later.. you’ll have Doctrine 2 and CodeIgniter 2 up and running in no-time. If you need complete breakdown explanation on how to setup CodeIgniter 2 and Doctrine 2, visit Widly Inaccurate for more details.

What’s in the ZIP?

• CodeIgniter 2.0.0
• Doctrine 2.0
• UhOh! 1.3
• Base HTML / CSS template from HTML5 Boilerplate

Installation Instructions

1. Unzip the “DoctrineIgnited-TLS-Web-Solutions-v1.0.zip“.
2. Copy the contents of the ZIP onto your server (remote or local)

Your website should have the “application, system, .htaccess, index.php, and license.txt” files on the root.
View the website and you should see “My Test message” come up. The default controller/action URL is “home/index/”.

3. We need to create the database and a test record. Create a database and execute the following SQL.

   DROP TABLE IF EXISTS `user`;
   CREATE TABLE IF NOT EXISTS `user` (
   `id` int(11) NOT NULL AUTO_INCREMENT,
   `username` varchar(32) DEFAULT NULL,
   `password` varchar(64) DEFAULT NULL,
   PRIMARY KEY (`id`),
   UNIQUE KEY `user_username_uniq` (`username`)
   ) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;INSERT INTO `user` (`id`, `username`, `password`) VALUES
   (7, 'Bob', NULL);

4. Modify “application/config/database.php” to match your database connection information. After updating the file, browse to “http://domain.com/home/test/” to see if you’ve got everything right. If all goes well, you should see the word “Bob” appear on the screen. That means Doctrine found your db table, found the entry, updated the entry’s username, and retrieved the name again for displaying in CodeIgniter view. Classy.If something went wrong or Doctrine cannot find the “user” table, you’ll see an error message similiar to this…
   (click to enlarge)
5. That’s it! You should be up and running. However, I do recommend you look at the next section to see a break down of how everything works.

DOWNLOAD THE DOCTRINE 2 AND CODEIGNITER 2 ZIP

Downloaded 2529 times.

How does it all work?

1. Doctrine 2 was installed to the “application/libraries” library and was setup to use “annotations” or PHP comments to interpret how our model’s data structure is set up.
2. A “User” model was created in “application/models/User.php” which annotes the database table “user” is setup through PHP comments and also has a few manually created setter and getter methods (eg: $user->getUsername()).
3. The “application/config/autoload.php” was modified to autoload the “doctrine” and “session” libraries, url and form libraries (in case you want to get fancy in your views for testing).
4. The “/.htaccess” and “application/.htaccess” were both modified in preparation for a “index.php”less URL. It’s just annoying and most Linux servers have mod_rewrite setup.
5. The “application/config/config.php” has the “index_page” set to blank, enable_hooks turned on, encryption_key set, global_xss_filtering turned on.
6. The “application/config/database.php” has the database connection information changed to match the right database connectivity.
7. The “application/config/hooks.php” as the “UhOh!” error reporting added to it.
8. The “application/config/routes.php” has the default controller set to “home”.
9. The “application/controllers/home.php” has a few base functions and a bunch of commenting to help guide you in making magic with Doctrine 2.
10. The “MY_Exceptions.php” and “MY_Controller.php” were both added to “application/core/”. MY_Exceptions extends CodeIgniter’s error reporting and MY_Controller extends CodeIgniter’s base Controller class to include a public Doctrine Entity Manager variable.
11. A few files were added to “application/errors/” to spice up the error reporting HTML output thanks to UhOh!.
12. The “application/hooks/uhoh.php” was added, to well, hook onto the core Exceptions.
13. The “application/libraries/Doctrine/” and “application/libraries/Doctrine.php” were both added and setup and is required for Doctrine 2 to run. Doctrine.php is where most of the Doctrine setting up and configuring will take place. It inherits the DB connectivity from the “database.php” config file.
14. A base view called “home.php” was added along with some style and script assets to “application/views” thanks to HTML5 Boilerplate. Those guys rock.

That’s it!

Still getting errors?

Make sure you’ve got all of the following installed or enabled on your server.

1. PHP 5.3+
2. Apache Rewrite module enabled
3. PHP short_open_tag enabled

DOWNLOAD THE DOCTRINE 2 AND CODEIGNITER 2 ZIP (1.1mb)

Downloaded 2529 times.

Testing HTML elements is a web designer must

Let’s say you’ve got a brand new HTML template you’ve just chopped up from a Photoshop document. You’ve styled the body content’s footer, headers, paragraphs, and maybe some pseudo lipsum text that match the Photoshop document. But when you hand it off to a developer to integrate into a content management system, is it ready for all the variable content HTML has to offer?

There’s one way to be sure templates are up to the snuff, and that’s making sure you’ve tested as many basic HTML elements that can be fit into  editable content regions. HTML5 Boilerplate is a “professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site” and gives quite a few documents for HTML designers to work with when building templates.

One of the files HTML5 Boilerplate provides is a demo HTML page of various HTML elements including: form labels and inputs, paragraphs and headings, tables, strong and em, captions, lists, and much more.

I’ve stripped down the demo page HTML5 Boilerplate provides down to just the elements and none of the head, body, and other stuff. You can view the DEMO PAGE or download it below.
Be sure to leave the commented credit to HTML5 Boilerplate where credit is due.

VIEW THE ELEMENTS TESTING TEMPLATE (13kb)

DOWNLOAD THE TEMPLATE (4kb)

Downloaded 285 times.

What is Modernizr?

Modernizr adds classes to the <html> element which allow you to target specific browser functionality in your stylesheet. You don’t actually need to write any Javascript to use it.

Have you ever wanted to do if-statements in your CSS for the availability of cool features like border-radius? Well, with Modernizr you can accomplish just that! The syntax is very intuitive, too:

.multiplebgs div p {
  /* properties for browsers that
     support multiple backgrounds */
}
.no-multiplebgs div p {
  /* optional fallback properties
     for browsers that don't */
}

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers that don’t yet support them.

Additionally, Modernizr creates a self-titled global JavaScript object which contains properties for each feature; if a browser supports it, the property will evaluate true and if not, it will be false.

Lastly, Modernizr also adds support for styling and printing HTML5 elements. This allows you to use more semantic, forward-looking elements such as <section>, <header> and <dialog> without having to worry about them not working in Internet Explorer.

What Modernizr doesn’t do

Modernizr does not add missing functionality to browsers; instead, it detects native availability of features and offers you a way to maintain a fine level of control over your site regardless of a browser’s capabilities.

However if you’re interested in that, you’ll probably want to look here: HTML5 Cross browser Polyfills.

Who uses Modernizr?

Twitter,
American Eagle,
Burger King,
The Knot,
Capital One,
Posterous,
NFL,
The State of Texas,

Good Magazine,
UC Santa Cruz,
Made By Many,
Hardboiled Web Design,
Lost World’s Fairs,
Clusterr,
LittleIpsum,
and
Strategy Design & Advertising

Find out more about Modernizr.

via The Web Designer’s Guide to Font Replacement Methods.

The Idea:

Grassroots interviews is a political interview based website that is free flowing, easy to use, and manageable using a content management system. The site needed to have a way to stream live and play past recorded videos and information archives instantly to users.

The solution:

A WordPress theme was customized and integrated into the CMS installation. Various content pages were created leveraging plugins and custom forms for donation, contact, newsletter, event schedules, etc. UStream’s video streaming and archive widget was embedded for quick and easy access to users.