Devel a themers hidden treasure

At my session "All your HTML are belong to us" at drupalcon Paris I asked about how many people used the "Devel" module, I thought that was a no-brainer, but much to my surprise only around 25% marked that they knew the module. That could ether be because they all were sleeping... or didnt wanna answer, or didnt wanna show that they used a tool that was called "Devel" (or my accent is so crappy none understand what im saying)
Well  anyways  That shocked me (GASP... the Horror) Devel module is THE tool for a Frontend drupalistica  - it even have some sexy shit build in (just read further and youll se stuff thats not GP21)
I understand so much better why some find it very hard figure out whats going on in a theme, cause with out the developer module its like working blind.

So before you read further go and download the developer module

Got it?  - now install & activate it, and be prepared for life where the sun will be warmer, the beer colder and your day to day happyness will increase with 28%.

Lets check what this bad boy do - go to a node on your site (node/1 or something)
So first up devel gives us 2 new taps in out node:

tabs: dev load & dev rendered

So what should we use this for? well it shows us what stuff thats loaded into the node and whats rendered. So now you can actually point and click youre way down into the node - awesome! so now its easy to figure out what a given element inside the node is actually called.

As an easy to grasp example lets print out the nodetype in the theme:

Open op your node.tpl.php file in your theme
and then add <?php print $node->type ?>

Reload the page and Viola the type of your node is printed on the page - how easy was that!
okay maybe that wasnt the most sexy thing you have seen yet.
But to graps the idea try to this:
<?php print $node->body  ?>  which is the same as $content
<?php print $node->title; ?> instead of $title,
something just a bit more usefull:
<?php print $node->comment_count;  ?>...guess what that gives you ;)

If we just wanna sex it up a bit more we can go a little bit further and split up the mighty $content and get some more nerdy stuff, and now youre on the road to get respect and kudos from the developers at the office.

Lets say we have an cck field called "testfield"
admin shot:

the field will look like this in the render tap

<?php  print $node->field_testfield[0]['safe'] ?>
Lets look a little closer on this: first we take the $node and goes to the array "field_testfield" (which is the same nave that we gave it in the cck configuration)  graps the first elemement of the array: [0] and prints out the safe version: $node->field_testfield[0]['safe'] pretty easy huh?

Now you can drop the cursing over $content and trying to reorder you output, and get total control!

Get control over $content

So after a day or 2 of clicking back and forth from view -> dev render and back to view again you might get a bit annoyed, but offcourse theres a solution for this: drupal_set_message() or as the quick version dsm();
lets start with this statement: <?php dsm('I have control - the world is mine'); ?>
That should give you a nice little message box on your page - now lets do something awesome cool:
<?php dsm($node); ?>

Holy crap batman - we can print out the whole $node thingie directly on the page -yeah! so if you wanna isolate an element its actually easy now and you dont have to click like a mad (wo)man.

Lets split out our $content

if we only uses <?php dsm($content); ?> you dont get so much out of it, but do look at the actually html. Instead try to grap it from the node <?php dsm($node->content); ?> and now the magick happens:



<?php print $node->content['field_testfield']['#value']; ?>
will print the field out.

So to sum it up really quick Now you can see wtf is going on inside you node.tpl -its an #win!

if you wanna know more about some of the quick commands you can use check out http://ratatosk.backpackit.com/pub/1836982-debugging-drupal Its good stuff.

Theme developer.

But besides of giving the themer  or should we now say the Front end developer? now were using devel module we kinda earned the term develper right ;)
okay but besides of that devel module haves a cool little feature that can come in really handy you.

Go back to the modules and go down to the devel part, and activate the "theme developer"


or if you have added the developer block inside you theme, you can activate it directly:


see that little box down to the bottom left on you page? click on that and wonderfull stuff happens:

You can now click around on every element and get to know a lot of cool stuff about you drupal site #epicwin!
actually watch this video http://drupal.org/node/209561 that will show you the rest.

Theres only one thing you should know.

When the themedeveloper is turned on (the module, not just the little on/off buttom ) will thrash your markup with loads of  <span id="thmr_283" class="thmr_call">, well thats what theme developer uses to get the data out of drupal, its a bit annoing but what the hell! - I have created an fugly alternativ, that im pretty sure can be done so much better: http://drupal.org/node/512476

Use the source themer - its right there -> http://drupal.org/project/devel