How to Customize and Theme Post and Date info in Drupal

Apr 1 2010
Posted by highrockmedia
Category: 
Tags: 

When I was theming my blog in Drupal, I decided I wanted a better way to customize and display post info such as wording used and the way date was displayed. The first step is to have a look around and see where the code is coming from that renders this info. I viewed the files in my custom theme folder and discovered these few lines of code in node.tpl.php

  1. <?php if ($submitted): ?>
  2.     <span class="submitted"><?php print $submitted ?></span>
  3.   <?php endif; ?>

In HTML, that is rendered as:
  1. Submitted by highrockmedia on 4-01-10

I decided I wanted to have customized date and post info only for my blog so a standard Drupal convention allows you to have node-blog.tpl.php to tailor the display of the blog content type. My theme did not have this file so I simply copied node.tpl.php and renamed it. Now that I had my custom Node Blog template file, I was all set to start customizing date and post info.

Well, the above code seemed boring and hard to theme in Drupal so I discovered a way to be more specific with the way the code that displays post and date info gets output in your Drupal theme.

I simply replaced the code above with this code:

  1. <div class="meta post-info">
  2. <?php if ($submitted): ?>
  3. <span class="submitted">Posted by <?php print theme('username', $node) ?></span>
  4.   <?php endif; ?>
  5.  
  6. <div class="dateblock">
  7.       <span class="month"><?php print $date_month ?></span>
  8.       <span class="day"><?php print $date_day ?></span>
  9.       <span class="year"><?php print $date_year ?></span>
  10.  </div><!--//end dateblock-->
  11. </div><!--//end meta post-info-->

**Note this crucial bit of code below was left out of the original post so if this did not work for you that's why. Place the code below in your theme's template.php file or create one if you don't have one already. (change "mytheme" to the name of your theme):

  1. function mytheme_preprocess_node(&$vars) {
  2.   // Grab the node object.
  3.   $node = $vars['node'];
  4.   // Make individual variables for the parts of the date.
  5.   $vars['date_day'] = format_date($node->created, 'custom', 'j');
  6.   $vars['date_month'] = format_date($node->created, 'custom', 'M');
  7.   $vars['date_year'] = format_date($node->created, 'custom', 'Y');
  8. }

By breaking down and getting more specific with this code, I was now able to use some CSS to customize the date into the nice little square blocks you see to the left of every post title. It also allows to have "Posted by", "submitted by" or whatever other wording you choose for the author part of the code.


Submitted by debora on Wed, 05/05/2010 - 21:56.

like it

Hey...this is a wonderful website buddy and an informative post!!! i am new here and i found this site very interesting and informative ,, you are a professional person i think.. i am mcse training professional and i have a great interest in such things...thank you for the post buddy and keep on posting nice stuff like this :)

Submitted by Giorgino on Thu, 09/16/2010 - 08:13.

Doesn't work in Drupal

Doesn't work in Drupal 6.

print $date_XXX don't show up nothing.

Submitted by highrockmedia on Sat, 09/18/2010 - 13:04.

Make sure you have the

Make sure you have the content type you are tryimg to display the date on set to show post info in your theme settings.

Submitted by JOsh on Wed, 12/22/2010 - 11:03.

What about the read more line?

Is there any way to do this with the read more line? Particularly, I'm interested in removing the link to the user's blog, but keeping the read more link. I see in the node-blog.tpl that this is printed with the <?php print $links; ?> line, but I don't know how to alter what it prints out. I don't really get how the pre-process stuff works in the template.tpl Thanks for this straight forward post by the way!

Submitted by highrockmedia on Wed, 12/22/2010 - 11:25.

Yes you could do this in your

Yes you could do this in your theme's template.php file:

  1. function phptemplate_links($links, $attributes = array()) {
  2.     unset($links['blog_usernames_blog']);
  3.     return theme_links($links, $attributes);
  4. }

This is also nice becuase it does not hack core.

Does that help?

Submitted by JOsh on Wed, 12/22/2010 - 13:43.

you are awesome!

That totally worked! I have a lot to learn about that template.tpl. Looks like a powerful piece of Drupal.

Submitted by highrockmedia on Wed, 12/22/2010 - 14:10.

Ok glad that worked.

Ok glad that worked. template.php can be fairly powerful. I am currently learning how to pass theme variables from theme-settings.php to template.php and then use them in a custom body class. cheers, thanks for stopping by.

Submitted by Anonymous on Thu, 03/17/2011 - 19:42.

Does not work for Drupal 7

Hi, this is a wonderful tutorial. But this seems to only work on Drupal 6. Is there a way to make this work for Drupal 7?