Building your site

There are a few steps involved with getting your Drupal site up and running:

  1. Sign up for Drupal-friendly hosting
  2. Install Drupal
  3. Install and configure Drupal modules for additional functionality
  4. Install your Drupal theme
  5. Enjoy!

  

Choosing Drupal modules

Modules extend the core, or ‘out of box’ abilities and functionality of Drupal. If you can think of a function or use for Drupal which is not included with a basic Drupal installation, chances are there is already a module to fit the bill. One of Drupal’s primary strengths as a CMS is the vibrant, active community development of modules, as well as core functionality.

  • Community contributed modules can be found via the web here.
  • Register for an account on Drupal.org in order to filter modules by Drupal version
  • The ultra friendly and helpful IRC community support can accessed by visiting the #Drupal-support channel on the Freenode network
  • Can’t find a module to fit your needs? Make your own!

Now to our tutorial; for our purposes it would be best to walk through an actual example. We’ll use one of the most commonly used modules, Views.

How to add (install) a Drupal module

First we download the module. Here’s how to find a module, and evaluate its stability and quality. Also, how to choose the correct release version.

  1.  Navigate to http://Drupal.org/project/Modules
  2. Click on the ‘Browse by name’ tab. Loading this tab can take some time, as you will be presented with a list of all contributed Drupal modules. 
  3. Scroll down to the section for ‘Views’.
  4. Click on the ‘Views’ link to view the full module information page.

Displayed is all the information/links you need to evaluate a module, including: name of maintainer, module description/overview, release versions and a host of support, development and bug/issue tracking links. 

  1. First off, you should read all of the description notes for a module; this is the large block of bulleted text below the module name/maintainer’s name. 
  2. Next, examine the ‘Releases’ table.

On this table you have the module release version (‘5’ meaning compatible with Drupal 5, ‘.x’ meaning compatible with all versions of Drupal 5, and ‘-1.6’ is the version of Views within the Drupal 5 release), the date of release, the size of the module download, a download link and release notes (notes from individual developers detailing issues dealt with or functionality added).

Here you are presented with two main choices: Drupal 5 or Drupal 4.7. This tutorial is aimed at Drupal 5.x users, so obviously you’ll be more interested in the 5.x-1.6 release. Now, you could just go ahead and get this module via the ‘Download’ link, or you could take another minute to make absolutely sure you know what you’re getting into! So in the spirit of gathering all available, useful information before making a tedious, possibly painful-to-undo decision, we’ll explore this module detail page in a bit more depth.

  1.  For the beginner oriented scope of this tutorial we’ll skip the Release notes; Click on the ‘View all releases’ link at the bottom of the ‘Releases’ table.
  2. What will load next is long list of all releases of this module, and a list of release notes for each version.

There are many, many releases for the Views module; from 4.6.x-1.x-dev at the very bottom of the page, to 5.x-1.6 and 4.7-1.6, the most recent releases, at the top. One excellent way to judge the quality and stability of a module is to gauge the number of total releases and the amount of time in between releases; this way you can make some very educated guesses at how much use, support and development is going on for a module. If there are only one, or two or three releases, or if development seems to happen once every couple of years or so, then the module is not in active development, which could mean that it is not used due to negative issues and bugs, or there is little demand for the module, so no one really works on it. Choosing modules is sort of like choosing leftovers to eat from the refrigerator; if there’s an old, dusty module found in the back corner of the contributed modules section of Drupal.org, you definitely want to use caution before consuming!

Next we’ll want to take a look at the module issue queue, which is found via a link near the bottom of the module detail page here:

Here is what a module issue queue looks like:

Notice that this page is a list of bugs, problems and incompatibilities involving ‘Views’ module, sorted by the most recently updated. Assessing a module based on this view is similar to an assessment based on analyzing a set of release notes for a module.

You should always go to view all open issues and take a quick look at the queue to see if there are a ton of issues (which may mean it’s either buggy, or more likely very large/complex and popular), or next to none (which usually means it’s new or unpopular), or see if there are any that would be red flags for your particular setup (ie. an issue declaring that this module doesn’t work with another module you’re using). Combining this analysis with the analysis of related release notes can give you a good overall ‘birds eye view’ of whether or not a module, or specific release of a module, is a good match for you installation. Sometimes you just need to install it, to see if it fits your needs and is working properly, but these steps above should give you another tool in evaluating Drupal modules.

 

Must have Drupal modules

Drupal provides a great foundation out of the box, but it is hard to imagine any site that wouldn’t benefit from a few third-party modules for added features. There are several modules that are must haves for any site, no matter how big or small.

Views

Views is a module that provides a flexible interface for Drupal site builders to control how listings of nodes are presented. More specifically, it’s a smart query builder that can build the query you need to display what you want, in a list, table, or full node display. For example, if you wanted a page listing all stories in a particular category, a table displaying sortable job postings grouped by location, or a block listing only blog posts with comments, you would create a “view”. Many other modules use Views as a basis for their functionality.

CCK - Content Construction Kit

The Content Construction Kit allows you to create your own Drupal content types with custom fields in your web browser, going beyond simple stories, pages, and blogs. There are also dozens of CCK add-ons for things like images, zip codes, dates, and media, which allow you to easily drop in new field types to your content types, handling all formatting and validation. For example, you might want a “Course” content type that included fields for a room number, duration, and the instructor’s photo.

Pathauto

Pathauto is a module that will automatically create path aliases for several kinds of content, including nodes, categories, and users without actually having to specify the aliases manually. These aliases are based on a "pattern" system that’s controlled by the administrator. You can use this to put dates in your blog post URLs, or add a SKU number to the end of your product node URLs. The Token module is required for Pathauto.

Panels 2

Panels is a module that divides any pages you choose into incredibly configurable layouts ready to drop in bits of content. Used with Views, this is an amazingly powerful way to create custom layouts. You can drop in views, blocks, pages, and pull things from user profiles. It had a drag-and-drop interface and even has features like rounded corners on your panel panes. You gotta try it! Views, CCK, Pathautho, and Panels 2 are the real “core that isn’t in core,” as far as we’re concerned. If you’re building a simple site with just static pages, blog posts, and discussion forums, you can probably make do without them. But as soon as you want to add a list of popular posts to the sidebar, add a bio to the footer of stories, or automatically create keyword-rich paths for your posts, you’ll start wishing they were there!

Spam

The Spam Module provides tools that help deal spam content or comments that may get posted to your site. Very useful, as it can unpublish or delete the spam automatically, and is highly configurable. Must have for any site that allows user comments.

WYSIWYG (What You See Is What You Get) Editor

This is a tough one. As a developer who has implemented dozens of Drupal sites, I’ve seen the kinds of problems that WYSIWYG editors can cause with creating incorrect code. However, they are a must-have for many site administrators and contributors who don’t know HTML and want a feature-rich editor where they can add text formatting and content easily. You most likely will want one, and there are several integrated with Drupal to choose from. TinyMCE and FCK Editor are the two most popular WYSIWYG modules right now. They are roughly equivalent in terms of features and quality, but you should check them both out to see if one has a feature you need in particular.

Installing Drupal modules

Now that you have a better picture of the development cycle of a module, it’s time to actually pick a release to install.

Dev,” “stable,” “alpha,” huh?

Module release versions are generally separated into two categories: development and stable. Development releases are, as the name suggests, under active development. This means less stability, but more features. Stable releases are, as the name suggests, the reverse.

Development releases will have the word “dev” in the name as an indicator. You may also see an “alpha”, “beta”, or “release candidate” (RC) version of a module. These are also used to indicate the overall stability and completeness of a module (alpha as least stable to RC as most stable).

Unless you need a specific feature that is in a development release, or need to preview what your site will look in the next stable release, always pick the stable version of a module. The latest release of a module may be a stable or a development one. If it is a development one, the latest stable version may be found by clicking on “view all releases” and searching for the last release not marked “dev”. Note: this page is not always sorted by date so make sure you scroll.

 

After you’ve located the desired module, you will upload it to the proper place on your server to use it. Two common methods for doing so are with a GUI FTP client and using a direct SSH connection to your server. Both will accomplish the same thing, so it’s merely a matter of using the method that you are more comfortable with. This document go over both methods.

Uploading via FTP

  1. Download the file to your own computer. With most browsers, you may right-click on the file link (labeled “views-5.x-1.6.tar.gz” above) and select an option such as “save link as..” to save it locally.
  2. Unzip the compressed file using a program such as Winzip into a directory
  3. Start an FTP client such as FileZilla
  4. You must provide connection information before your client will connect to your site. The screenshot below illustrates the typical fields in an FTP client. The “host” field will contain the domain name that you have set aside for your website. The “username” and “password” fields contain the username and password that you use to access your website.                                                                                                                                                                                                            
  5. The section labeled “Local site” represents your own computer. Navigate to the location where you downloaded the module here.    
  6. The section labeled “Remote site” represents your website. When connected to a website to a Drupal installation, the file structure will resemble the image shown above.
  7. Scroll down to the “sites” folder in the “Remote site” section and enter it. Inside, there will be an “all” folder and a “default” folder. Enter the “default” folder. If it doesn’t exist, create a directory named “modules” and enter it.
  8. Drag the decompressed folder containing the module from the local machine over to the “modules” directory. Once you’ve done this, the module will be uploaded to your site.

SSH

An SSH session is less visibly user-friendly than a GUI FTP session. This tutorial will not go over detailed instructions on commandline usage, but will give enough to upload a file.

  1. If you have Windows, puTTY is an SSH client that is freely available to you. When you start it up, you’ll be asked for a server, a username, and a password. The server is the domain name of the server you will be connecting to. If you are using Mac OS X, the terminal application is in /Applications/Utilities. The command to begin an SSH session is “ssh username@domain.com”. You’ll then be asked for the password for your server.
  2. Once you’ve logged in, you’ll be presented with a command prompt. The “ls” command will give the name of every file in the current working directory. Directories inside this one will either end in a / or will be a different color. You can change directories with the command “cd ” or go back to your initial directory with “cd”. Using these commands, you can explore the directory structure of your site.
  3. The top directory for your site will contain an “index.php”. If you can’t find this, you may wish to consult your tech support or webhost help pages.
  4. Once you are there, type “ls” and you should see something similar to this (but with a different prompt/directory path)  
  5. There are two notable directories here: “modules” and “sites”. The “modules” directory contains the core modules bundled with Drupal. You could put this module here, but it’s somewhat sloppy. The preferred place to put this module is inside the “sites” directory. Type “cd sites” to change into that directory. Inside this directory, there is an “all” directory and a “default” directory. Go into the “default” directory.
  6. If it doesn’t already exist, make a directory called “modules” here by typing “mkdir modules”. Enter the modules directory by typing “cd modules”. Every module you install should go into this directory.
  7. Keep this window open and go to the webpage with the desired module on it. Right-click (or ctrl-click on a mac) on the link and select “copy link” or “copy link address”. Go back to the terminal window, type “wget “ (including the space), and paste the link in. It should look like this: “wget http://ftp.drupal.org/files/projects/views-5.x-1.6.tar.gz"   Press the enter key. The file will then download directly to the server. 
  8. There will now be a file that ends in .tar.gz in this directory, which you can see if you “ls” once.  
  9. This file contains the entire module and must be decompressed before it can be used. To dcompress it, type in “tar -xzvf “ followed by the name of the file. The screen will then look like the following image, which displays all of the files that are being uncompressed.
  10. Once you’ve done this, the module’s files will be uploaded to your site.

Enabling modules

Before the files can be used by your site, the module must be enabled.

  1. The standard location for a Drupal site’s module administration page is “[sitename]/admin/build/modules”. Enter that in your browser and you will go to it.     
  2. This page is where modules are listed and managed. There are two tabs to this page: “List” and “Uninstall”. For the moment, we’ll just be dealing with the “List” tab. This page contains all the modules that are currently installed. Scroll down the list, and you’ll find a series of them that begin with “Views”
  3. Note that “Views” is both checked and greyed out. Modules can be interdependent. They may rely on other modules’ functionality in order to run. The modules labeled “required by” are modules that require this module to be enabled for functionality. They themselves must be disabled before this module can be disabled or removed. The modules labeled “Depends on” are modules that this module depends on. This module must be disabled before they can be disabled or removed. In this case, the Views module can’t be disabled until Location Views and Views Panes are disabled first.
  4. Enable the other modules in the Views section by clicking on the checkbox and clicking on “Save Configuration”. Once the page has refreshed, you should see a screen that looks like this screenshot. The green text will notify you that you successfully enabled the modules. The exact text may be different depending on the modules you enable.                                                                                                                        
  5. If you forget to enable a required module, Drupal will notify you of this gracefully. It will also allow you to enable the required module from the notification message. Read the notifications and enable the desired modules.                                                         
  6. If the module is not installed, red text will appear notifying you so. If this appears, you must install that module first before enabling the one you want.

 

Using Panels 2

Now that the Panels 2 module is in beta and relatively stable, there is an important decision new site owners or developers need to make -- should I build my site using Panels or not?

There are pros and cons to each.

With Panels, you gain greater flexibility and power over your content, including the ability to place blocks in multiple areas, create custom per-page layouts, and customize the layout of node add/edit forms. All of this can also be done through an administrative interface right on your site. The major downside is that this is a large, complex module with a learning curve that also carries a performance hit unless you export the panels to a module.

Our themes come with additional styling and a custom TNT panel layout, if you choose to work with Panels.

Using Panels 2 with your TNT theme

What is Panels?

Panels is a module that allows you to create pages that are subdivided into areas. You can then point-and-click to assign content (views, blocks, pages, user profiles, etc.) to the areas and thereby create a new layout for content on your site.

Your TopNotchThemes theme comes designed with lots of abilities for Drupal and contributed modules. One of these is the ability to easily use the popular Panels 2 module written by Earl Miles. Panels 2 (a massive upgrade of the original Panels module) is still in beta and may be a little rough around some edges, but it’s so much more powerful that it’s what we consider a must-have module (http://www.topnotchthemes.com/handbook/must-have-drupal-modules).

Without using Panels, you normally assign content in Drupal through the Blocks interface by assigning blocks to any of the predefined regions in your theme. TNT themes come with an expanded set of regions to give you a lot of flexibility in placing your content. In fact, you may be able to build your site without needing to use Panels at all. But for those cases where you need a different layout for different pages or sections of your site, the ability to place a block in multiple regions, change the layout of add/edit forms, or to control more advanced options through an interface, that’s where Panels comes in. And TopNotchThemes helps make it easier to use Panels by providing a pre-themed panel page called "TNT Panel" that duplicates some of the styling from the rest of the theme.

We strongly recommend that you review a tutorial or screencast covering Panels 2 before working with this very powerful module on your site: http://drupal.org/node/210208

Does my Drupal site include Panels?

Probably not. Panels is a contributed (not a core) module for Drupal, so unless you specifically installed it or asked someone else to install it for you, an out-of-the-box Drupal installation won’t include Panels.

Can I use Panels to create my entire site layout instead of Drupal’s regions?

The Panels 2 module offers the option to have Panels itself take over all your site’s regions, instead of using traditional blocks. However, at this point, themes from TopNotchThemes do not support this functionality. The TNT Panel can be used to lay out the internal content of your page with special styling to match your theme, but not replace the entire layout. In the future, we may offer themes that can be used with entirely Panels-based layouts.

How do I install Panels?

You install the Panels module the same way you would install any other Drupal module. If you are unfamiliar with this process, we recommend you take a look at the detailed tutorial on module installation we’ve provided for you at http://www.topnotchthemes.com/handbook/installing-drupal-modules.

Briefly, the steps are:

  • Download the module from Drupal.org: http://drupal.org/project/panels (make sure you get Panels 2, not Panels 1, which will be marked with a 2.x in the file name: eg. 5.x-2.0) 
  • Uncompress the downloaded package
  • Upload the module’s directories and files to the sites/all/modules directory of your Drupal installation - Enable the module in your site’s Modules settings page: www.yoursite.com/admin/build/modules

IMPORTANT! In order to use the pre-themed TNT Panel page, you will need to copy three files from the extras/panels subdirectory of your TNT theme download to the Panels layouts subdirectory.

  • Files to copy: tnt-panel.css, tnt-panel.inc, and tnt-panel.png
  • Copy from: topnotchthemes_####/extras/panels (on your hard drive)
  • Copy to: sites/all/modules/panels/layouts (to your web site)

Once you have done this, you will be able to add TNT Panel pages to your site through the Panels administrative interface at www.yoursite.com/admin/panels

How do I create a Panels page?

1. Add a TNT PanelPage

Begin the process for creating a new TNT Panel page:

  • Go to the Panels administrative interface at www.yoursite.com/admin/panels
  • Click on "Panel pages" - From the "List | Add | Import | Settings" set of tabs, click on "Add"
  • Click on the "TNT Panel" layout image

2. Configure Your TNT Panel Page

You will then be taken through a series of steps to configure your Panel page. After filling in the necessary information for each page, click the "Next" button at the bottom left of the page.

3. Page Settings

  • Panel name (required)

Give the panel page a unique name. For example: all_features -

  • Page title (optional)

If you want a title to be displayed at the top of your panel page, enter it here. 

  • Path (required)

Enter the url you want your panel page to have. What you enter will be the path from the root of your website. So if you enter "mypanelpage" (without the quotes) then the url to access your panel page will be: www.yoursite.com/mypanelpage. Likewise, if you enter "news/politics/us/mypanelpage" then the url to access your panel page will be: www.yoursite.com/news/politics/us/mypanelpage. -

  • Click "Next"

4. Advanced Settings

This will take you to the "Advanced" tab of the settings for your panel page. This is a collection of settings that give you control over how users can access your panel page.

  • Menu settings (optional)

These settings let you make your panel page an item in the Drupal menu system and assign it to a menu. This is the best way to make your panel page available to your users, otherwise you have to provide a hardcoded link to it somewhere else in your content.

  • Advanced settings (optional) Here you can disable blocks all the other blocks and regions when this page is displayed, control access to who can see the page, and embed css code into the page.

In general, TNT panel pages are designed to work with all the regions enabled, so you typically wouldn’t want to disable the blocks/regions. If you want to limit who can see your page, then check the authorized roles. Otherwise, anyone will be able to access your page, which is what you want if it’s intended to be a public page.

Unless you know what you’re doing and had a specific purpose for doing so, you normally wouldn’t be embedding css into the page. More typically, you’d theme it by modifying the css in your theme’s style.css file.

  •  Click "Next"

5. Context Settings

These settings allow you to pass in additional information to your panel page that can let you programmatically modify what kind of information gets display on your panel page. It’s probably one of the most powerful features of panels, but it’s beyond the scope of this tutorial and is optional for many uses of a panels page. Feel free to experiment and learn more along with other Panels users at http://groups.drupal.org/panels.

  • Click "Next"

6. Content

Finally, the exciting part! This is where you get to add the content into your panel page. Fortunately, this also one of the easiest parts.

  •  Click on the "+" symbol for any of the panel areas
  •  A popup window will appear with a selection of items from a number of categories (e.g., Custom, Mini panels, Core blocks, Menus, and Contributed modules).
  •  Select an item you want to appear in that panel area. For instance, "New custom content" lets you create a "pane" of static text to go into your panel area.
  •  A new popup will appear with options to configure the settings for that pane, including a title override, css class/id, and access control, as well as settings to add/control the content itself.
  •  Click "Add pane"
  • Repeat this process to put additional panes into the same panel area and to put other panes in additional panel areas.
  • Click "Save"

IMPORTANT! When you’ve finished adding panes to your panel page, you need to click "Save" to save all your changes to the database.

7. View Your Panel Page

  • Visit the url of your panel page based on the Path information you entered in Step #3.
  • You should see a normal page in your site, but the content area will have been replaced with your new TNT panel page.
  •  If you need to make changes to your panel page, visit www.yoursite.com/admin/panels/panel-page and select the "Edit" option for your panel page.