Creating and Theming a Custom Content Type with Drupal 7
One of the great new things about Drupal 7 is that it's now easier to customize your site content. In Drupal 6, you typically had to use the CCK (Content Construction Kit) module for fine-grained control in customizing content, but that has been folded into core for Drupal 7. Drupal 7 is now a true content management framework (CMF).
Drupal 7: It's All about Fields
When you customize content in Drupal 7, it involves creating or modifying what's often referred to as a content type. Drupal 7 comes with two defaults: Page and Article. When building a site, you often need additional content types. These might include events, press releases, FAQ, staff, photo gallery and more. What makes these unique? It's all about the Fields that you add to your content type.
A Field is an attribute for the content type, and these attributes are types of information associated with your content. If you have an Event content type, you might need to add date, location and link attributes. Each of those can be realized through the use of Fields.
Theming and Nodes
A Drupal 7 Node is simply an individual page with content that's rendered using a specific content type that contains all of your fields. Fields are extremely flexible, and there are many possibilities for display and theming them, depending on what you want to do. Theming, in regard to Drupal, is the presentational layer of the code and content, and there are various ways to achieve theming from some simple changes in the Drupal Admin UI to more complex custom node templates—for example, node--custom.tpl.php. In this tutorial, I use the Display Suite module for theming our node. It's a visual interface that allows for custom layouts without really needing to know too much code. There also are other ways to theme a node, including custom node templates and the Panels module.
Drupal 7 comes with basic default fields, such as Text, Long text, File, Image and List. There also are many additional Field types that can be added via contributed (contrib) modules.
Manage and Edit
To gain insight into existing content types and Fields on your site, navigate to /admin/structure/types, or use the admin toolbar: Structure→Content types. Figure 1 shows the administrator toolbar at the top of the Admin Drupal UI in the browser. You'll use this a lot to navigate the admin area for various tasks. This assumes you have admin access to a Drupal site or at least have been given the proper permissions by an admin to see and use the toolbar.
Figure 1. Drupal 7 Administrator Toolbar
On the content type landing page, as shown in Figure 2, you can see existing types, and you would add new ones here.
Figure 2. The content type landing page is where you can edit your content types and manage their fields and display.
You also can edit a content type, add and edit Fields, and manage its display from this page. Figure 3 shows existing Fields and a select menu to add new ones for a content type.
Figure 3. You can manage existing fields for an individual content type and add new ones with a select menu.
Now that you have a basic overview of how content types work, let me show you how to build a new one and theme it. For this example, let's create and theme an Event content type. You will need a few additional contrib modules available from drupal.org. Ideally, to follow along with the tutorial, you'd want a fresh install of a Drupal 7 site, and download and set the default theme to the Professional Theme.
If you are not familiar with how to install Drupal, it's actually not that hard, and you can install it in a LAMP environment. If you already have a local development machine with LAMP, it's a matter of creating a new MySQL database and following a point-and-click GUI install for Drupal. There are links at the end of this article in the Resources section for some basic Drupal install information. Note that Drupal has an entire command-line utility of its own called drush where you can install core and download contrib modules, but for the sake of this tutorial, I'm using the Drupal Admin UI. If you really decide to dive in head first to Drupal, drush can be a huge time saver.
Mock It Up
When creating a new content type, I like to do a quick mock-up to get a better picture of how I want the finished product to look. Figure 4 shows what I came up with for my Event.
Figure 4. Mock-up of how an Event page will look.
The mock-up helps determine which modules I'll use. You can find links for these in the Resources section. Contributed modules and Theme (contrib) required the following:
- Get Locations
- Chaos tool suite (ctools)
- Display Suite
- Professional Theme
Core Fields—included with Drupal 7 (no need to download):
- Overview (Long Text/Textarea)
Now that you know what modules and Theme you are going to use for building your Event content type, download the latest stable recommended release from drupal.org (highlighted in green on its project page). The recommended release should be sufficient, but there may be times when you run into a bug and need to use the latest dev release. Figure 5 shows an example of release information for a contrib module on drupal.org.
Figure 5. The latest recommended release of a module is shown highlighted in green (7.x-1.5 in this case). Dev releases are red, and a new 2.x beta branch is yellow.
Download the modules, untar them, and put the resulting folders in the /sites/all/modules folder from Drupal root. Although you will see a Modules folder at root, never add third-party modules to this one; it's a core folder that gets updated or changed only when a core Drupal release comes out. Likewise, download the Professional Theme, untar it, and put it in /sites/all/themes.
You also need to download some map markers from the Get Locations project page. The getlocations-markers.tar.gz file should be sufficient. Untar this file, and put it in sites/all/libraries/getlocations/markers. Most likely you will have to create the Libraries folder on a new Drupal install, but if it exists already, simply make a new folder within that called getlocations, and then put the newly untarred Markers folder within that.
Danny Englander is a Drupal Developer specializing in theming, site building, UX, UI, responsive design and JQuery. He runs his own Drupal shop and freelances for various clients around the United States.
Practical books for the most technical people on the planet. Newly available books include:
- Agile Product Development by Ted Schmidt
- Improve Business Processes with an Enterprise Job Scheduler by Mike Diehl
- Finding Your Way: Mapping Your Network to Improve Manageability by Bill Childers
- DIY Commerce Site by Reven Lerner
Plus many more.