WDTUTORIALS

Drupal 7 - How To Create A Custom Template For A View

Tutorial on custom View Templates.

Download and enable modules

Download and install Views and Devel modules:

drush -y en views views_ui devel

Create new content type and add some content

Go to Structure > Content types > Add content type:

Add a custom field:

Add content:

Create a new view

Go to Structure > Views > Add new view

Create a view with block:

Save.

Add your custom fields in FIELDS:

Disable Create a label and Add default classes if you want to reduce extra markup:

Prepare the view block

Hit the Theme: Information under Advanced tab:

In Row style output, copy one of the template names:

I chose views-view-fields–flowers–block.tpl.php, because it tells us nicely what this file is all about (a block representing a view called flowers).

Create an empty php file with your chosen template name in themes/bartik/templates folder:

Write this in it:

<?php print "testing"; ?>

Rescan templates files in the theming information area and your template name should go bold:

Hit ok and save the view.

Goto Structure > Blocks and place the View block in Content section:

Save blocks, go to frontpage and you should see a ‘testing’ line for each custom node you created:

Theme it

Open your template file (views-view-fields–flowers–block.tpl.php) and write this in it:

<?php dpm($fields); ?>

dpm is a useful function provided with Devel module.

Refresh your frontpage and you should see this:

Double-click the item name you want to find path for.

Now you can see that $fields variable is an array with 2 elements, title and field_flowers_availability objects.

You can access them like this:

  dpm($fields);
  // print "testing";
  print $fields["title"]->content;
  print $fields["field_flowers_availability"]->content;

Result

Samuli Natri (Entrepreneur, WDTutorials.com founder) has been building websites since the late 90's. He attended Helsinki University Of Technology (Computer Science) and Helsinki University (Social Sciences).

Latest Tutorial CKEditor Tutorial With CodeSnippet Syntax Highlighting

Copyright @ 2018 WDTutorials.com. All rights reserved. Privacy policy.Terms Of Service.