The Drupal 7 Node Template

Now we can attack the example I mentioned at the beginning of this documentation: "we have a content type called event with the following fields: title, date, location, main image, body and agenda". To do this we create a copy of the node.tpl.php file and rename it as node--event.tpl.php.

In the Drupal admin, create a new content type called 'event' and create four fields in it: 'date', 'location', 'main image' and 'agenda'. The 'body' field should be there by default along with the 'title' field (make them any kind of fields you want).

Set URL Aliases for New Content Types: After you create your content type, go under Administration > Configuration > Search and metadata > URL aliases > Patterns (you will need the PathAuto module installed for this) and you will see the new content type listed and you can then change the default URL for all event pages.

If you don't do this, then your URL will look like this: www.examplesite.com/content/event rather than something like this: www.examplesite.com/event.

If you wait until after you start creating content, then you'll have to go back to each page, uncheck the 'Generate automatic URL alias', delete the URL under 'URL alias', re-check the 'Generate automatic URL alias' box and then click Save.

Place the following placeholders anywhere you want inside the node--event.tpl.php file. Wrap them in your own DIVs and assign your own classes to them:

<?php print $title; ?>
      
<?php print render($content['field_main_image']); ?>

<?php print render($content['field_date']); ?>

<?php print render($content['field_location']); ?>

<?php print render($content['body']); ?>

<?php print render($content['field_agenda']); ?>

Each snippet of code references the 'machine name' of each field. You can find what they are in the admin under Structure > Content Types > Event > Manage Fields...

Here's an example of what one might look like in your template...

<div class="mainImage">
  <?php print render($content['field_main_image']); ?>
</div>

The Title data is found in a higher level within the Drupal node array than the Content data. That is why it looks different than the other fields.

Now you have the ability to do all sorts of design tricks that would be a little tricky if you had to rely on the Drupal WYSIWYGs. For example, you could embed the Agenda content inside a cool JQuery accordion or maybe float the page title over the main image so that the main image is behind the title.

A Basic node.tpl.php

Search engines may find some content on your site that you did not create node templates for. Drupal will, of course, wrap it within the page.tpl.php template. But that might not be enough to prevent this page from looking incorrect if certain DIVs are only in node level templates. If that's the case, then you will want to create a generic node.tpl.php template to include those DIVs. It may look as simple as this...

<div class="someClass">
  <?php print render($content); ?>
</div>

We are simply treating this template the same way we treated our other generic templates. We're stripping out the unnecessary code. But we are also making sure that it provides a decent enough layout so any "straggler" content doesn't look awful.

Use case: I created a "quote" content type that was only meant to be embedded in certain pages or maybe embed a bunch of them on a page. The problem is that Drupal's internal search function doesn't search your pages like Google does. It searches it's database as opposed to fully browser-rendered HTML pages. So if a visitor searches for a person who I have a quote from, it will return that single quote as a result rather than the page I have it embedded in. It's really annoying.

If anyone has a solution to this issue, other than embedding a site with custom Google search, please share.

This page was last modified on August 22, 2017.

This documentation is a work-in-progress. As I continue to learn more about the software, I will try to keep this documentation updated. I'm no expert of anything, so if anyone feels they need to correct me about something I've written or wish to add some additional tips, feel free to mention it in the comments.

"Drupal 7 Theme from Scratch" was written by TenTen71 because no one else would.