Drupal is a highly customizable content management system. If more designers were able to get past the programmer-speak, we'd see a lot more Drupal websites out there. WordPress is great, too, but Drupal may be more versatile and flexible, able to power small brochure websites, blogs, as well as vast social networks and online communities.

I'd like to point out that if you're an advanced Drupaller, you might have issue with some of the methods proposed in this article. You also might not like that I don't give all the information about a topic, or that I list a few modules which accomplish things that can really be accomplished by messing around in the template.php file. This article isn't for you. This article is for beginners. When teaching a new topic, sometimes you need to cut out information or you risk overwhelming the student. This tutorial is long enough, and hopefully after a couple runs through, people will look deeper. This article is meant a jumping off point to help get you started with your first Drupal site.

We'll start off with some definitions, and then get you started building and theming your first Drupal website. Here is a list of commonly used elements and modules, along with explanations of what they do.

Definitions

Nodes
Nodes are content. That's it. It's a generic term used to describe any individual piece of content. A blog post is a node; a page, a news entry and a user profile are all nodes.

CCK
CCK stands for Content Construction Kit. It's a powerful module that allows you to customize different types of content. (It will come built into Drupal 7, but it's a separate module in Drupal 6… We'll explain what modules are further down.) Users often refer to content as a "page" (which is a type of content), but you may want to tailor different content types to different purposes. For example, you might have a different content type for news entries, blog posts, testimonials, portfolio entries and pages. Using CCK, you can add custom fields for each content type. For example, a portfolio entry would need a field for an image.

Themes
Drupal separates content from functionality and design. Your theme is where you create a design for your website. Because content and functionality are completely independent of the theme, you can easily change a theme without messing up the way things work. Also, Drupal uses a fall-back system that allows you to create highly specific template files for a specific portion of your website; and if there's no template file, Drupal falls back to the default template file. So, you can customize as much as you like! For example, you could assign a template file from your theme to one content type and allow another content type to fall back to your default template.

Blocks
Blocks are portions of content. For example, a block could be a news entry in the left sidebar that links to the full node. You could specify blocks to appear only on certain nodes, or you could make the news block appear only on the home page. Menus can be configured in blocks, too. Or you could present the most recent comments in a block.

Regions
Drupal distinguishes between regions of the page, such as the header, footer and left sidebar. You can drag and drop blocks into these regions.

Modules
Drupal is a very modular system. The core package comes with very little built in and is not very useful out of the box. (Drupal 7 will be much more functional out the box.) You'll need modules to extend Drupal to fit your needs. Think of Drupal as a car. The core package is the engine, but you need to install a number of parts, or modules, to build the type of vehicle that you want that engine to run. At the end of this article, I'll list a number of modules that I consider must-haves for any Drupal website (like the next one).

Views

This module is invaluable, and probably the one that every Drupal website should have! The name tells you nothing about what it does. In short, just as you use CCK to customize different content types, such as news entries, you can use Views to craft specific displays of your content. For example, you would use Views to create a block of the three most recent news items. Then, in the block configuration section, you would drag the news block to the region where you want it to appear. You would then link the news block to paginated nodes, also created with views, that list all your news entries. You can even use Views to do fancier things, such as display a list of portfolio items in members' profiles. Views can get very technical and complex, and it does require a separate tutorial, but it is a fundamental building block of any Drupal website.

ImageCache
ImageCache is awesome! With ImageCache, you can upload one image, say, for a portfolio entry, and create different image profiles. Let's say I put a views block of my most recent portfolio entry on the home page. I could create a medium-sized image for the home page, a thumbnail for the page with the portfolio listing and then a larger size for the full view. I upload only one image, and it creates all three for me! You define the different profiles in ImageCache and then decide which to use in the content type settings and in your views. You can even do fancy image processing, such as adding image overlays for a watermark, color adjustment and more.

Taxonomy
By another word, categories. A taxonomy is how you categorize content. For example, you might want to categorize blog posts into different topics or portfolio entries into different project types. You do that by creating “Vocabularies” (one vocabulary for blog posts, one vocabulary for portfolio entries). You can add topics in the taxonomy administration section, or you could set up a tagging system to add categories as you add content. You can even use your taxonomy in Views to display certain categories of content. There is also a module called "Taxonomy Menu" that allows you (as the name suggests) to display the categories as a menu. Perfect for a blog!

Installing Drupal

Drupal.org has documentation to guide you through the installation process. Once you've installed the CMS, we'll walk through setting up, configuring and theming your first Drupal website. The installation documentation can be found here:

1. Download and uncompress Drupal.
2. Create the database.
3. Configure the settings.php file.
4. Run the installation script.
5. After installing, create the files directory.

The above steps take you through the installation process. If you're at all familiar with building dynamic websites that require a database, steps 1 and 2 will be familiar. Luckily, Drupal 7 (which will hopefully be out by the end of the summer) will streamline the process a bit.

Configuring Drupal And Installing Modules

After you've installed Drupal, you'll need to configure your website. Before I configure anything else, though, I like to install all of my modules.

Note: as with any Web project, before building a Drupal website, you need to plan your design, content and functionality. While Drupal is certainly flexible, planning the project will make setting it up much easier. You should know the functionality that your website will require and the types of content you will be building; this should tell you what modules you'll need.

Downloading the Modules

To get you started, here is a list of modules (and their dependent modules) that I find myself installing on practically every website I build. They're probably more than you need, but they will give you great control over the appearance of your Drupal website and make your life generally easier. Download them, and then we'll walk through installing them.

• Administration menu
  Adds an easier-to-use administration menu.
• Advanced Blog
  Allows you to customize the blog name and do other tweaks.
• Advanced Help
  A required module for Views.
• Block edit
  Adds edit links to blocks.
• CAPTCHA
  Protect forms (contact, comment, etc.) with image or word verification.
• CCK
  Content Construction Kit: add fields to content types.
• CKEditor
  A WYSIWYG text editor. (You'll also need to download the editor library from here.)
• Read More Link
  Customize the "Read more" link.
• FileField
  Allows you to add an "Upload file" field to content types.
• ImageCache Create image profiles ("thumbnail," "full size," etc.) Set actions such as scaling and cropping. "Image Cache Actions" is another module that provides further processing for things like watermarking and image and text overlays.
• ImageField
  Add an image upload field to content types. (Requires "FileField" to be installed.)
• IMCE
  An image browser for your WYSIWYG editor.
• IMCE Wysiwyg bridge
  Required for IMCE.
• jQuery Update
  Checks for updates to the jQuery JavaScript library.
• Nice Menus
  Create and configure drop-down menus and menu blocks.
• Nodewords
  Add meta tags to content.
• Page Title
  Edit the title tag of individual nodes (i.e. the title that appears in the browser tab).
• Pathauto
  Automatically create human-readable paths. Customize to create unique paths for taxonomies and content types.
• Submitted By
  Customize the display of the "Submitted by" byline on posts. For example, you could have a blog post say, "Posted by Fred Flintstone, Yesterday." You can also add tokens, such as the category, so that it reads something like, "Posted by Fred Flintstone, Yesterday in Drupal, HTML, and CSS."
• Taxonomy Menu
  If you categorize or tag content (such as blog posts), you can use this module to create a menu out of your taxonomy.
• Token
  Allows bits of data from your content to be used in Views, arguments and other modules. If you post a portfolio entry, for example, the author, title and date would all be tokens.
• Views
  Create displays of your content (see above for more information).
• Wysiwyg
  An easy-to-use module that allows you to install a number of different text editors. (Works with CKEditor module.)

Of these, the Wysiwyg and CKEditor modules require a bit of configuration beyond what is normal for a Drupal module, because they require source files for the editor. Read their documentation for more details.

This is a big list, and by no means are all of these modules necessary. Some might be overkill, but the modules in this list will give you a lot of control over your website's appearance (tweaking the "Read more" link and "Submitted by" details, for example) or make it easier to maintain and manage the website once it's built.

Installing the Modules

Here's the beauty of Drupal. Drupal is very compartmentalized: core features and modules are kept separate from "contributed" modules (i.e. modules that you add yourself). And functionality is kept separate from theming. When you add modules to your Drupal installation, you won't add them to the modules folder (which you may have noticed when first installing the CMS). That's only for "core" modules (ones that come bundled with Drupal). When you add modules to your website, you will need to drop them in the /sites/all/modules folder. You will need to create this folder.

Simply unzip a module and upload all of its contents to the sites/all/modules folder. For example, the Views module would be located at sites/all/modules/views.

Note: make sure to follow the documentation for the Wysiwyg and CKEditor modules.

After you have uploaded all the files, go to the administration page for your website's modules, located atAdminister → Site Building → Modules. Go through the list there and enable the modules. You may want to enable a few at a time: if you're on a shared host, you might hit memory limit errors if you try to do it all at once.

Also, look through the Core - Optional modules, and enable the ones you want. Here are the ones I enabled on my portfolio website:

• Blog,
• Comment,
• Contact,
• Database logging,
• Help,
• Menu,
• Path,
• PHP filter (you may not need this one),
• Statistics,
• Syslog,
• Taxonomy,
• Update status,
• Upload.

We'll jump into theming really soon! But first, we need to set up some more of the website.

Configuring Your Drupal Installation

Head over to Administer → Site configuration → Site information, and fill in the blanks. Because you haven't created any content yet, don't bother setting the "Front page."

Other areas you'll need to set up in "Site configuration" are "Clean URLs," "Date and time," "File system" and "File uploads."

A few more things I like to do before I jump into theming is set up some initial content. I'll create or modify the content types (such as blog, news and portfolio) and then add a little sample content, such as "Home" and "About me." Working on a theme is easier if you have some content to hang it on. You might want to go back to Administer → Site Configuration → Site information and set the front page URL to the path of your home page.

Drupal's menu system allows you to add individual menu items using the menu administration. Alternatively, when you add content, you can add a link to it in the menu right there. I usually use the latter method.

Go to Create content → Page and create a page, your home page. Enter the title (which will be the h1), and then in the "Menu settings" create the link title ("Home") and add it to the "Primary Links" menu using the drop-down input. Enter some text in the body field, and then select "Publishing options" and set it to "Published." Feel free to click open the other options in the node creation form to see what they're all about.

Create another page, "About me," and add it to primary links, too. You'll see an option to set the "weight" of the link. Think of the number as a unit of weight, like pounds or ounces. The higher the number, the heavier the weight, and the further down the link will appear in the menu. If you set "Home" to 0, you'll probably want to set "About me" to 10 (leave a little wiggle room between the two so that you can add more links in between if you want later). "About me" will now appear to the right of (or below) "Home."

Now, let's jump into theming!

Theming Your Website

A great way to start theming is to copy an existing theme. Start with the default ugly blue Garland theme. Then scrap the CSS files, delete all the HTML and rewrite the .info file. (We'll walk through that in a moment.) This will get you started from scratch, but it leaves some basic theming functions in there, which is useful.

Setting up the Theme Folder

Similar to modules, some themes come bundled with Drupal core. When you add a new theme, however, you'll add it to sites/all/themes. The themes folder goes right next to the modules folder that you created earlier. So, copy the Garland folder, which is located at /themes/garland, and save it to sites/all/themes/garland. Let's assume throughout the rest of the tutorial that your theme's new name is "Yourtheme."

The default Garland file structure is pretty flat and messy. Let's clean up. Delete the minnelli and color folders. Delete all the images in the image folder. Add the following folders: js, css and any others that are necessary for your theme.

Rename sites/all/themes/garland to sites/all/themes/yourtheme. Also, rename the garland.info file toyourtheme.info and open it in a text editor, such as Dreamweaver or Notepad.

Configuring Your Theme's .info File

The yourtheme.info file stores basic information and settings for your theme. Change the top, where it says $Id: garland.info to $Id: yourtheme.info. Change the date, name and description. These will show up in the theme's administration page.

Note: you'll see a list of CSS files. It's important that you add CSS and JavaScript files to your theme's info file, and not simply hard-code them into the theme's HTML itself. This will make your theme more portable and allows Drupal to compress and cache these files. Every module has its own style sheets and JavaScript, so you could easily end up with a couple dozen individual files to HTTP-request on each page! So, when you're done building your website, compress and cache all of these files in the "Performance" configuration section. This will greatly increase the speed of your website.

Because you created a folder for your style sheets and JavaScript, update the path to the CSS files in theyourtheme.info file to the following:

stylesheets[all][] = css/style.css

Add any other style sheets using the same format. To add a print style sheet, you would follow this pattern:

stylesheets[print][] = css/print.css

Adding scripts is a similar process. Here's an example of how to add three JavaScript files to your theme:

scripts[] = js/swfobject.js
scripts[] = js/cufon.js
scripts[] = js/museosans.js

No need to add jQuery. It comes with Drupal already!

Now, we make sure to add our regions. As we noted at the beginning of this article, regions are where you put blocks. At the bottom of the yourtheme.info file, below the line that reads "datestamp," add the following:

regions[header] = Header
regions[billboard] = Billboard
regions[content] = Content
regions[left] = Left sidebar
regions[right] = Right sidebar
regions[footer] = Footer

I mostly use the Billboard region for the home page, and I occasionally place blocks there on interior pages. You can add as many regions as you like, but keep in mind that these regions will appear on every page of your website. You can leave a region empty on other pages, but you want the regions to apply to your entire website. Don't add a region named "About Me Page Right Sidebar."

In this list, you don't need to worry about layout or order. You'll do that in the actual theme template files.

Building Your Theme

A good way to build a Drupal theme is to build the home page and an inner page in static HTML, with all the graphics cut and all the styling in place. Then cut and paste piece by piece into your theme files, and alter the CSS as necessary. Drupal will automatically create IDs and classes for many areas—such as blocks, regions and navigation—so you'll have to tweak your code to accommodate the different names.

In your theme folder, open the file, page.tpl.php. This is the main file for theming your website, and it acts as the frame of your content. If you skim through the file, you'll see <?php print $header; ?> and <?php print $left ?> and the like. This is where your region content gets inserted. Because you created custom regions in theyourtheme.info file, make sure to include them in your page.tpl.php file, too. <?php print $content ?> is the main area where content is created. If you create a new page, for example, the content is inserted there.

To get started with theming, delete any and all PHP in the page.tpl.php file except for:

• The php between the HTML <head></head> tags.
• The region content snippets, such as <?php print $left ?>,
• Lines 67 through 74 (but feel free to alter the HTML there),
• The snippet that outputs the main content, <?php print $content ?>,
• And <?php print $closure ?>, which should go right before the </body> tag

Everything else is fair game to chuck, as none of it is absolutely necessary. Strip out all HTML and insert your own HTML instead.

The other files in your theme folder that you'll want to edit (but don't have to) are:

• node.tpl.php
  This file controls how nodes and teasers are displayed. For example, a blog's main page might show 10 blog posts, each one displaying only a teaser of the node linked to the full post.
• block.tpl.php
  We've discussed what blocks are. This template controls the theme for blocks. You can create theme files for individual regions and blocks, too!
• comment.tpl.php
  Controls the appearance of individual comments.

Remember to update the screenshot.png when you're done creating your theme. This will show up in the theme administration section.

Whenever you change the yourtheme.info file or add or delete a theme file, you need to refresh the system's theme cache. To do this, just navigate to the theme administration area of the website.

When building a theme, I like to refresh the website and use Firefox's Firebug plug-in to check the HTML class and ID names that Drupal creates.

One important thing to remember about Drupal is the fall-back system that we mentioned earlier. Modules come with their own CSS. To change the appearance of something that is generated by the module, do not edit the module's CSS! Instead, simply add styling to your theme's CSS; Drupal will use it. If you don't add any styling to your theme, Drupal will revert to the module's default. The benefit of this method is that your entire theme will be wrapped in a nice tight bundle, and if the module is ever updated, you won't overwrite your modifications.

The Drupal community is full of active developers and themers who would be happy to help if you run into trouble. Ask questions in the main Drupal forum, groups or module issue queues. The community is one of the best reasons to use Drupal as a CMS.

Now, you should be well on your way to creating your own Drupal website!

Further Resources

Here some useful links that will help you get started with Drupal:

• Drupal discussion forums
• Drupal groups
• Theming blocks individually, by region or by module
• Drupal social network
• Book: Drupal 6 Themes
• Lullabot podcasts
• Drupal Dojo