Front end drupal
ptg From the Library of Athicom Parinayakosol ptg Front End Drupal From the Library of Athicom Parinayakosol ptg This page intentionally left blank From the Library of Athicom Parinayakosol ptg Upper Saddle River, NJ • Boston • Indianapolis • San Francisco New York • Toronto • Montreal • London • Munich • Paris • Madrid Capetown • Sydney • Tokyo • Singapore • Mexico City Front End Drupal Designing, Theming, Scripting Emma Jane Hogbin Konstantin Käfer From the Library of Athicom Parinayakosol ptg Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in this book, and the publisher was aware of a trademark claim, the designations have been printed with initial capital letters or in all capitals. The authors and publisher have taken care in the preparation of this book, but make no ex- pressed or implied warranty of any kind and assume no responsibility for errors or omissions. No liability is assumed for incidental or consequential damages in connection with or arising out of the use of the information or programs contained herein. The publisher offers excellent discounts on this book when ordered in quantity for bulk purchases or special sales, which may include electronic versions and/or custom covers and content particular to your business, training goals, marketing focus, and branding interests. For more information, please contact: U.S. Corporate and Government Sales (800) 382-3419 corpsales@pearsontechgroup.com For sales outside the United States please contact: International Sales international@pearsoned.com Visit us on the Web: informit.com/ph Library of Congress Cataloging-in-Publication Data Hogbin, Emma Jane. Front end Drupal : designing, theming, scripting / Emma Jane Hogbin and Konstantin Käfer. p. cm. Includes index. ISBN 978-0-13-713669-8 (pbk. : alk. paper) 1. Drupal (Computer file) 2. Web sites- Design-Computer programs. 3. Web site development. I. Käfer, Konstantin. II. Title. TK5105.8885.D78H65 2009 006.7’6—dc22 2009002636 Copyright © 2009 Pearson Education, Inc. All rights reserved. Printed in the United States of America. This publication is protected by copyright, and permission must be obtained from the publisher prior to any prohibited reproduction, storage in a retrieval system, or transmission in any form or by any means, electronic, mechanical, photocopying, recording, or likewise. For information regarding per- missions, write to: Pearson Education, Inc Rights and Contracts Department 501 Boylston Street, Suite 900 Boston, MA 02116 Fax (617) 671-3447 ISBN-13: 978-0-13-713669-8 ISBN-10: 0-13-713669-2 Text printed in the United States on recycled paper at R.R. Donnelley in Crawfordsville, IN. First printing, April 2009 Editor-in-Chief Mark Taub Executive Editor Debra Williams Cauley Development Editor Songlin Qiu Managing Editor John Fuller Project Editor Anna Popick Copy Editor Jill Hobbs Indexer Michael Loo Proofreader Linda Begley Technical Reviewers Károly Négyesi Bernie Monette Lynda Chiotti Caroline Hill R.G. Daniel Cover Designer Chuti Prasertsith Composition Gloria Schurick Graphics Tammy Graham Laura Robbins From the Library of Athicom Parinayakosol ptg v Contents Foreword . xvii Preface . xix Acknowledgments xxiii About the Authors .xxv Chapter 1: Web Page Design 1 Describing Content 2 Displaying Content 3 Content Types and Content Fields . 5 Organizing Lists of Content . 8 Chronological Organization . 9 Linear Organization . 10 Topical Organization . 10 Popularity-Based Organization 12 Task-Based Organization . 13 Page Design and Layout . 14 Interface Components 14 Regions . 15 Design Resources 17 Interaction . 20 User Satisfaction 21 Guided Tasks . 22 From the Library of Athicom Parinayakosol ptg vi Contents Code 22 Separating Form, Function, and Behavior . 23 XHTML . 23 Cascading Style Sheets 24 Scripting Languages . 24 Interaction with JavaScript 24 Work Flow . 25 Working with Designers . 26 Working with Programmers 27 Working with Clients . 27 Working with Site Visitors 28 Summary 29 Chapter 2: The Themers’ Toolkit 31 A Gentle Introduction 32 Building a Page for Display 32 Directory Structure 33 Paths 33 Theming Strategies . 33 Best Practices . 34 Alternative Strategies . 34 Drupal Terminology . 36 Node 36 Users, Roles, and Permissions 36 Blocks and Regions 37 Categories, Taxonomy, Vocabularies, and Terms . 38 Parent Items and Weight 40 Menu . 40 From the Library of Athicom Parinayakosol ptg Contents vii Pagers .41 Hooks and Naming Conventions 41 Must-Have Modules . 42 Content Creation Kit (CCK) Module . 42 Views Module . 53 Devel Module 57 Browser Tools . 60 Firebug . 60 Web Developer’s Toolbar 62 Screen Shot and Testing Services . 62 Language References 65 XHTML . 66 CSS 66 PHP . 68 JavaScript . 69 Maintaining Your System . 69 Scheduling Tasks with Cron . 70 Revision Control 70 Summary 71 Chapter 3: Working with Drupal Themes 73 Finding Themes . 74 Interface Components 76 Develop a Library of Themes 77 Installing Drupal Themes . 78 Download and Unpack 78 Enable the New Theme 79 Personal Themes 81 From the Library of Athicom Parinayakosol ptg viii Contents Administering Themes . 82 Global Settings 83 Theme-Specific Settings 84 The Front Page 85 Anatomy of a Theme 88 Naming and Initializing the Theme . 88 Page Template . 89 Including External CSS and JavaScript Files . 91 Regions . 92 Screenshot . 93 Starter Themes . 94 Zen 95 Custom Theme Settings 97 Customizing Banner Images . 97 Migrating to Drupal 6 99 Converting a Drupal 5.x Theme to a Drupal 6.x Theme . 100 WordPress . 101 Joomla! . 103 Summary . 104 Chapter 4: The Drupal Page .107 Elements of a Page 107 Dissecting a Theme 108 Sitewide Page Variables . 109 General Utility Variables 111 Page Metadata 111 Site Identity 112 From the Library of Athicom Parinayakosol ptg Contents ix Page Content, Drupal Messages, and Help Text . 112 Creating New Page Variables 113 Modifying Page Variables . 115 Navigation and Menus . 115 Theming Menus 118 Grid Work 120 Regions . 121 Blocks . 124 Customizing the Markup of Blocks . 125 Search 126 Changing Templates . 128 Custom Front Page 129 Custom Offline Page 130 Alias: Page 133 New Templates from Aliased URLs . 134 Page Templates for Views . 136 Adding CSS Classes . 136 Page Templates for Content Types 137 Taxonomy Templates 138 Graphical Headers . 140 Delivering Plain Content . 141 Print-Friendly Pages 142 Mobile Devices 147 Summary . 149 Chapter 5: Drupal Content 151 Node Templates 151 The Template File node.tpl.php 154 From the Library of Athicom Parinayakosol . the Drupal ecosystem and will bring a new atten- tion to design in Drupal. Since I’ve mostly focused on the “back end, ” it’s nice to see the front end . experience, Front End Drupal clearly charts a path to theming mastery. In fact, I’ll be the fi rst to admit that I learned a lot from this book. The Drupal community