Tidy-up back to the kitchen

So much of those out-of-town posts! Back to my normal life, and to the kitchen! Did I say kitchen?!!! I’m blogging for …cooking (the life)? LOL! But how I wish I’m really “back-to-my-normal-life” which would mean, I really went off of it. Gone easy, to the beaches, relaxing, and stuff like that, but I didn’t :( , not much!

This kitchen I’m referring here is the back-end, of the CMS I’m working on, where stuff on the front-end – basically the HTML and the data within is being prepared. Been tidy from the start, indentions, and phpDoc blocks. I thought why not take this quality of code up to the front. What exactly I’m talking about?

Here. Don’t you wish when you look at the HTML source of your published page you have a well formatted document tree? That instead of this

1
2
3
4
5
6
<div> <div>
<p><a href="http://wordpress.org/development/2009/03/wordpress-summer-of-code-2009/">Source</a></p>
				</div>
 
				<p class="postmetadata"> Posted in <a href="http://www.marvinmarcelo.com/category/productivity/" title="View all posts in productivity" rel="category tag">productivity</a>,  <a href="http://www.marvinmarcelo.com/category/work-related/" title="View all posts in work related" rel="category tag">work related</a> | <a class="post-edit-link" href="http://www.marvinmarcelo.com/wp-admin/post.php?action=edit&amp;post=814" title="Edit post">Edit</a> |   <a href="http://www.marvinmarcelo.com/wordpress-summer-of-code-2009/#respond" title="Comment on WordPress Summer of Code 2009">No Comments &#187;</a></p>
			</div>

It would have rendered like this

1
2
3
4
5
6
7
8
<div>
  <div>
    <p><a href="http://wordpress.org/development/2009/03/wordpress-summer-of-code-2009/">Source</a></p>
  </div>
  <p class="postmetadata"> 
    Posted in <a href="http://www.marvinmarcelo.com/category/productivity/" title="View all posts in productivity" rel="category tag">productivity</a>,  <a href="http://www.marvinmarcelo.com/category/work-related/" title="View all posts in work related" rel="category tag">work related</a> | <a class="post-edit-link" href="http://www.marvinmarcelo.com/wp-admin/post.php?action=edit&amp;post=814" title="Edit post">Edit</a> |   <a href="http://www.marvinmarcelo.com/wordpress-summer-of-code-2009/#respond" title="Comment on WordPress Summer of Code 2009">No Comments &#187;</a>
  </p>
</div>

Neat! So, let’s go with the ingredients, I mean the tools/modules needed for this.

HTML Tidy
wiki: is a computer program and a library the purpose of which is to fix invalid HTML and to improve the layout and indent style of the resulting markup. Install instructions here. See that? It also fixes invalid HTML!

And, since I’m using Smarty, this line is called before the $smarty->display(); method.

// this way
$smarty->load_filter("output", "tidyrepairhtml");
// or 
$smarty->register_outputfilter("tidyrepairhtml");

You got nice and neat HTML source! Which takes me to thinking, perhaps, someone had already written a WP plugin of tidy. Let me try google it. And yes, there’s available plugin.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">