Theming best practices and preprocess by ayushi infotech.ppt

7/27/2019 Theming best practices and preprocess by ayushi infotech.ppt

1/22


2/22

Overview Theme Architecture an Introduction

Structure of theme Files

Core Template for different regions Template Hierarchy

Theme() execution Hierarchy

Standard templates available for module

Tools for getting started

Exploring for theme

Examples: Step-by-step guide to theme a page and

form in a module for D 6/7 .


3/22

Structure of Theme Files


4/22

Each Template Handles A Region of Your Sitehtml.tpl.php -Master template file for your site

page.tpl.php - Entire Page

front-page.tpl.php - Just Front Page

block.tpl.php - Blocks

comment.tpl.php - Comments forum.tpl.php Forums

field.tpl.php - modules/field/theme


5/22

Template Hierarchy

Home Pagepage-front.tpl.phppage.tpl.php

Nodesnode-type.tpl.phpnode.tpl.php

Pagespage-node-edit.tpl.phppage-node-1.tpl.phppage-node.tpl.php

page.tpl.php

Blocksblock-module-delta.tpl.phpblock-module.tpl.phpblock-region.tpl.php

block.tpl.php

Boxesbox.tpl.php

Commentscomment.tpl.php


6/22

Theme() execution hierarchytheme() execute in below sequence

1. Theme() check first for themename_mycallback() intemplate.php. If it finds one, it takes precedent.

2. If not it looks, again in template.php, for aphptemplate_mycallback ()

3. If it finds nothing else, it uses thetheme_mycallback () in your module.


7/22

Available templates for module

theme(pager) theme(image)

theme(table)

theme(item_list) or theme_item_list()


8/22

Tool helps in theming1. Firebug

2. Drupal for Firebug3. Devel and devel_themer

4. coder

5. Web Developer Toolbar6. Starter Theme e.g. zen or fusion

7. XDebug & NetBeans


9/22

Devel: dpm()

Firebug: To inspect HTML and CSS, and prototype styles(http://getfirebug.com)

Web Developer Toolbar: Adds a menu and a toolbar to Firefox with varioushelpful web developer tools. https://addons.mozilla.org/en-US/firefox/addon/60

XDebug & NetBeans
http://getfirebug.com/https://addons.mozilla.org/en-US/firefox/addon/60https://addons.mozilla.org/en-US/firefox/addon/60https://addons.mozilla.org/en-US/firefox/addon/60https://addons.mozilla.org/en-US/firefox/addon/60http://getfirebug.com/


10/22

Drupal for Firebug: Install the Drupal for Firebug module
http://drupal.org/project/DrupalForFirebughttp://drupal.org/project/DrupalForFirebug


11/22

Exploring for theme theme.inc

template.inc Mytheme_preprocess_page()

Mytheme_preprocess_node()


12/22

Ex 1: How to Call theme()A brief overview of theming in Drupal 6/7.

Create a tpl.php file for your template

Create a hook_theme() implementation to register yourtemplate

Create a module preprocess function for any variables you wishto make present in the template

Clear caches

Go to the block/menu callback/other location you haveinvoked the theme() function from to call your template


13/22

Step1) hook_menu() implementationfunction drupalcamp_menu(){

$items['my-themeing-page'] = array(

'title' => 'General page callback',

'page callback' => 'drupalcamp_page_theming','access arguments' => array('access content'),

'type' => MENU_NORMAL_ITEM

);

return $items;

}

Step2) hook_preprocess

function drupalcamp_preprocess_drupalcamp_page_theming(&$vars){$vars['new_variable1'] = 'this is my first variable;

}


14/22

Step3) hook_theme implementation

function drupalcamp_theme(){$items['drupalcamp_page_theming'] = array(

'template' => 'drupalcamp-page-theming',

'arguments' => array(),

'access agruments' => TRUE

);

return $items;

}

Note the underscores in the theme function name are replaced with hyphens when

we create our template reference. Note also that, in theory, the template namedoes not have to match the theme function name, however, we have discoveredthrough testing that if the template name is different from the theme functionname then the theme may not recognise the template file when it is coped to thetheme's template directory. I'm not sure if this is by design, but for safety's sakemake sure the template file and the theme registration are the same in name.


15/22

Step 4) call theme() function

function drupalcamp_page_theming(){return theme('drupalcamp_page_theming');}

Step 5) Next job is to create our template file drupalcamp-page-theming.tpl.php

This is my template.

Now if you clear the Drupal cache (see below) and we visit the page http://yoursite.com/my-themeing-page then we will see the output of our theme function


16/22

Ex 2: Page callback & themeThis is similar to example 1 only difference is we added page callback =>

theme and deleted step4

Step1) hook_menu() implementation

function drupalcamp_menu(){

$items['my-themeing-page'] = array(

'title' => 'General page callback',

'page callback' => theme',

page arguments => array(drupalcamp_page_theming),'access arguments' => array('access content'),

'type' => MENU_NORMAL_ITEM

);

return $items;}


17/22

Step2) hook_theme implementationfunction drupalcamp_theme(){

$items['drupalcamp_page_theming'] = array(

'template' => 'drupalcamp-page-theming',

'arguments' => array(),

'access agruments' => TRUE

);

return $items;

}


function drupalcamp_preprocess_drupalcamp_page_theming(&$vars){$vars['new_variable1'] = 'this is my first variable';$vars['goto_back'] = l(My Link', my url, array('attributes' => array('class' =>

'orangeBtn')));}


18/22

Ex 3: How to theme a formStep1) hook_menu() implementation

function drupalcamp_menu(){

$items['form_theme'] = array('title' => 'How to implement theme with a form callback,

'page callback' => 'drupal_get_form',

'page arguments' => array('drupalcamp_form'),

'access arguments' => array('access content'),'type' => MENU_NORMAL_ITEM

);

}


19/22

Step2) hook_theme implementationfunction drupalcamp_theme(){

$items['drupalcamp_form'] = array(

'template' => 'drupalcamp-form',

'arguments' => array('form' => NULL),

'access arguments' => TRUE,

); }


function drupalcamp_preprocess_drupalcamp_page_theming(&$vars){

$vars[about_us'] = l(About Us', url, array('attributes' => array('class' => Btn')));$image_path = drupal_get_path('module', drupalcamp') . '/images/image.png';$var[my_image'] = theme_image($image_path,'','');$var['setmessages'] = drupal_get_messages();

$vars['firstname'] = drupal_render($vars['form']['firstname']);$var[add_temp'] = theme('drupalcamp-page-theming'); // Called a template

}


20/22

Step4) hook_form implementationfunction drupalcamp_form(){

$form['firstname'] = array(

'#type' => 'textfield',

'#title' => 'First Name',

'#default_value' => 'test',

);

return $form;

}

Step5) Create drupalcamp-form.tpl.php page


21/22

Some Useful Linkshttps://ratatosk.backpackit.com/pub/1836982-debugging-drupal http://drupal.org/project/devel_themerhttp://mogdesign.eu/blog/performance-tips-for-drupal-theming/

http://www.drupaler.co.uk/blog/theming-drupal-6/96#comment-1504

http://design.acquia.com/content/tools-getting-startedhttp://www.appnovation.com/theming-views-drupal-6-simple-way
https://ratatosk.backpackit.com/pub/1836982-debugging-drupalhttp://drupal.org/project/devel_themerhttp://mogdesign.eu/blog/performance-tips-for-drupal-theming/http://mogdesign.eu/blog/performance-tips-for-drupal-theming/http://www.drupaler.co.uk/blog/theming-drupal-6/96http://design.acquia.com/content/tools-getting-startedhttp://www.appnovation.com/theming-views-drupal-6-simple-wayhttp://www.appnovation.com/theming-views-drupal-6-simple-wayhttp://www.appnovation.com/theming-views-drupal-6-simple-wayhttp://www.appnovation.com/theming-views-drupal-6-simple-wayhttp://www.appnovation.com/theming-views-drupal-6-simple-wayhttp://www.appnovation.com/theming-views-drupal-6-simple-wayhttp://www.appnovation.com/theming-views-drupal-6-simple-wayhttp://www.appnovation.com/theming-views-drupal-6-simple-wayhttp://www.appnovation.com/theming-views-drupal-6-simple-wayhttp://www.appnovation.com/theming-views-drupal-6-simple-wayhttp://www.appnovation.com/theming-views-drupal-6-simple-wayhttp://www.appnovation.com/theming-views-drupal-6-simple-wayhttp://design.acquia.com/content/tools-getting-startedhttp://design.acquia.com/content/tools-getting-startedhttp://design.acquia.com/content/tools-getting-startedhttp://design.acquia.com/content/tools-getting-startedhttp://design.acquia.com/content/tools-getting-startedhttp://www.drupaler.co.uk/blog/theming-drupal-6/96http://www.drupaler.co.uk/blog/theming-drupal-6/96http://www.drupaler.co.uk/blog/theming-drupal-6/96http://www.drupaler.co.uk/blog/theming-drupal-6/96http://www.drupaler.co.uk/blog/theming-drupal-6/96http://www.drupaler.co.uk/blog/theming-drupal-6/96http://www.drupaler.co.uk/blog/theming-drupal-6/96http://mogdesign.eu/blog/performance-tips-for-drupal-theming/http://mogdesign.eu/blog/performance-tips-for-drupal-theming/http://mogdesign.eu/blog/performance-tips-for-drupal-theming/http://mogdesign.eu/blog/performance-tips-for-drupal-theming/http://mogdesign.eu/blog/performance-tips-for-drupal-theming/http://mogdesign.eu/blog/performance-tips-for-drupal-theming/http://mogdesign.eu/blog/performance-tips-for-drupal-theming/http://mogdesign.eu/blog/performance-tips-for-drupal-theming/http://mogdesign.eu/blog/performance-tips-for-drupal-theming/http://mogdesign.eu/blog/performance-tips-for-drupal-theming/http://drupal.org/project/devel_themerhttps://ratatosk.backpackit.com/pub/1836982-debugging-drupalhttps://ratatosk.backpackit.com/pub/1836982-debugging-drupalhttps://ratatosk.backpackit.com/pub/1836982-debugging-drupalhttps://ratatosk.backpackit.com/pub/1836982-debugging-drupalhttps://ratatosk.backpackit.com/pub/1836982-debugging-drupal


22/22

Catch me atMandakini125 (skype)[email protected]

Theming best practices and preprocess by ayushi infotech.ppt

Documents

Transcript of Theming best practices and preprocess by ayushi infotech.ppt