Creating and Theming a Custom Content Type with Drupal 7

Activate Contrib Modules and Theme

Go to the Drupal Modules Admin page located at /admin/modules, or from the admin toolbar, click on Modules. Check the check boxes for Get Locations, Getlocations Fields, geoPHP, Geocoder, Libraries, Chaos tools, Link, Date, Date API, Date popup and Display Suite, and then click Save configuration.

Using the admin toolbar, click on Appearance, and activate the Professional Theme listed under Disabled Themes. Use the Enable and set default setting that will enable it and bring it up to the top under Enabled Themes.

Get a Google API v3 Key

You'll need to add a Google Maps JavaScript API v3 Key to display a map for an event location. Go to the Google API console and log in with your Google account (or create a Google account if you haven't already). See Resources for links. Once logged in, generate a new key, or use an existing one from the API Access tab. Back in Drupal, use the admin toolbar to go to Configuration, and then under Web Services, click on Get Locations. Expand Google API Key, enter your key, and save the configuration.

Set Your Locale and Create a Custom Date and Time Format

Now is a good time to set your site's Locale as well. From the toolbar, go to Configuration→Regional and Language→Regional settings or admin/config/regional/settings. Chances are your default time zone already is set, but it's good to confirm or adjust it. Accept all other defaults here and save. Also, from Regional and Language, click on Date and time, located at admin/config/regional/date-time, and then the Formats tab. Let's create a custom date format. It's pretty straightforward, and you'll use standard code from the PHP Date Manual, (see Resources). Once on the Date and Time formats page, click Add Format. In the Format string text box, copy and paste (or type) in this string:

l F j, Y-  g:i a T

You will see that it immediately renders as a nicely formatted date like this:

Sunday August 12, 2012- 11:00 am PDT

Let's give this new format a name. Go back to the main Date and Time page you were just on, and click Add date type. Let's call it Full date with time zone for Date type. For Date Format, choose from the select menu, and most likely the new format you just created will be the last item in the menu. Choose that, and save (Add date type). The new Date Type is saved (you'll refer to it later).

Create an Image Style

For the event image, you'll want a custom style. Using the admin toolbar, click on Configuration and then Media→Image Styles or go to /admin/config/media/image-styles. Click Add Style, type in event_photo, and save. Under Effects, choose Scale in the Select New Effect select list. For width, choose 375, and save (Add effect). The new effect is saved, and you will refer to it later.

Build It

Now, go to Structure→Content types from the admin toolbar, and click Add content type. You now get a new page with options. You can pretty much accept the defaults here, but let's customize a little:

  • Name: Event.
  • Description: a custom content to display company events.
  • Publishing Options: uncheck Promoted to front page.
  • Display Settings: uncheck Display author and date information.
  • Comment Settings: set to Hidden under Default comments setting for new content.
  • Menu settings: uncheck Main Menu.

Save the content type. Back on the content types landing page, you now will see Event (Machine name: event), in addition to Basic page and Article, as shown in Figure 6.

Figure 6. The Newly Added Event Content Type

Add Fields

Now you're ready to add/edit your custom event fields. Click manage fields for Event. You'll see that the Body Field already exists. Click to edit on Body, and simply change the Label to Event Overview, and save the settings.

Add a Date Field:

  1. On Event→Manage Fields under Add new field, type in Event Date.
  2. Type — Date (ISO format).
  3. Widget — Pop-up calendar.
  4. Click Save.
  5. Now on Field Settings, accept the defaults and save again.
  6. On the next screen, check Required Field.
  7. Click on More Settings and Values.
  8. Now for Date Entry Options, choose a format from the select list. Ideally, choose something that shows the day, month, year and time with the desired time format (whether it's 24-hour time or am/pm)—for example, Aug 10 2012 - 3:30:13pm.

Add a Location Field:

  1. On Event→Manage Fields under Add new field, type in Event Location.
  2. Type — Geolocations Fields.
  3. Widget — Geocoder.
  4. Save, and on the next screen for Search options, choose No Search box.
  5. Save, and on the next screen, check Required field.
  6. Accept all other defaults here, and save again.

Add a Link Field:

  1. On Event→Manage Fields under Add new field, type in Event Link.
  2. Type — Link.
  3. Widget — Link.
  4. Save, and on the next screen, simply save again.
  5. On the next screen, make required and choose Required Title, and save.

Add an Image Field:

  1. On Event→Manage Fields under Add new field, type in Event Image.
  2. Type — Image.
  3. Widget — Image.
  4. Save, accept defaults, and save again.
  5. On the next screen, check Required field.
  6. Check the Alt and Title fields, and save.

Figure 7 shows the finished Manage Fields page. Note that you can drag the fields around to re-order them with the little + icons, but when you do, you need to save the page again.

Figure 7. The finished Fields page for Event. You can re-order the fields by dragging the little + icons under the label, but you must save the page after doing so.

As you might have noticed when creating all these fields, there are dozens of other options for customization, and for the most part, you accepted many of the defaults. However, as you get more into Drupal site building, you'll want to explore these options and experiment with them.

Manage Your Display

Now you just need to do a little theming using the Manage Display tab for your Event content type. This will be a two-part process. The first is to get some reasonable defaults for your display. Using the admin toolbar, head back to Structure→Content types→Event→manage display. Using the "select lists and drag" icons, make your layout look like Figure 8. Note the Gear icons at the far right; you can click on those to fine-tune your settings, but always remember to choose Update, and then save the page after any changes. You'll notice with the Date and Event photo, you now have the respective format and style you created previously.

Figure 8. The Configured Layout after Adjusting Labels and Settings


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.


Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Display Fields in a Table

Anonymous's picture

That is all great information. Thank you for putting it together in one place.

However, suppose you have a number of fields in a content type and you wish to display them in a table with a column of lables and a column of values. How would one go about that?

Reply to comment | Linux Journal

Izetta's picture

Areas most at risk Dengue fever child chicken pox remedies
is endemic in Burma. Most store bought flea products for dogs contain permethrin, as does
substituting unbleached all-purpose flour for the whole wheat.

If you want contextual

Anonymous's picture

If you want contextual tabular data to be displayed on each page then first you need to add the data fields to the content type in order to collect that data. Next, you need to create a view block to display the data. This is very easy to achieve by creating a view (views module) using the table format. You will need to configure the contextual settings of the view to only display data belonging to that page. Once you have accomplished that, the view can easily be inserted into the page in a number of ways depending on your choice of page layout method. With either Display Suite or Panels you can easily create a content pane and/or block that displays the view where you wish. Alternatively, you can embed the view directly in a custom page template. While this may sound like a lot of work, it is actually very simple and can be done in less than an hour depending on the number of fields you need to add to the content type. Hope this helps. Cheers, Kevin

Reply to comment | Linux Journal

Minecraft games's picture

I got this web site from my friend who told me about this web page and at the moment this time
I am browsing this website and reading very informative content at this time.