Building Websites with Drupal: Learn from the Experts

Article Series

July, 2014

Building Your First Drupal 8

Company Site

by Todd Tomlinson

Unicon is a Registered Trademark of Unicon, Inc. All other product or service names are the property of their respective owners. © Copyright 2014, Unicon, Inc. Some rights reserved.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 United States License.

To view a copy of this license, visit: http://creativecommons.org/licenses/by-nc-sa/3.0/us/

Table of Contents

2

Executive Summary 3

Introduction 3

Requirements for a Company Site 3

Installing Drupal 4

Installing and Creating a Theme 4

Creating Taxonomy 7

Updating the Article Content Type 7

Creating the Client Portfolio Content Type 8

Expanding Drupal’s User Profile 11

Aggregating External News Feeds 12

Contact Form 13

Assembling the Site 13

The About Us Page 14

The Client Portfolios Page 14

The Service Offerings Page 17

The Key Staff Members Page 18

News Articles 21

The Staff Blog Page 21

Adding the Contact Form to the Main Menu 22

Creating the Footer 22

Creating the Homepage 22

Summary 24

Conclusion 24

Welcome to the fourth article in the series, “Building Websites with Drupal: Learn

from the Experts” by Drupal expert and author Todd Tomlinson. This series explains

how to use Drupal, an open source content management system, to build websites to

serve a variety of purposes. This article is titled, “Building Your First Drupal 8 Com-

pany Site.” As the title implies, Todd will walk readers step-by-step through building a

basic company website using Drupal 8. Todd takes readers through landmarks includ-

ing creating taxonomy, aggregating external news feeds, and creating a homepage. By

the end of this article, readers will be able to create company websites that promote

brand and provide a strong Internet presence for the company.

Begin reading below as Todd introduces readers to the world of creating company

websites with Drupal 8.

In a relatively short time span the Internet has changed everything. Having a site on

the web was once a novelty; now it has become the foundation for all companies large

and small, regardless of industry. Companies without websites lead customers to

question whether the companies are legitimate or not. Fortunately, Drupal is an excel-

lent platform for quickly and effectively creating a company’s online presence.

This article will build on the concepts covered in previous articles, focused on build-

ing a marketing-centric website for a wide variety of companies.

We will start with identifying the requirements for the site. To demonstrate the

ease of building a company site on Drupal, I’ll create a marketing-focused site for a

company that provides general business consulting services. Requirements for the

site include:

1. An overview of the company in an About Us page

2. A portfolio of client projects

3. An overview of the services offered by the company, along with the ability

to link client project information to each service offering

4. A section that highlights key staff members

5. The ability to author and publish news articles

6. The ability to pull news feeds from various sources on the topic of general

business

7. The ability for select staff to blog

8. A Contact Us form

9. A main navigational menu that links to the main sections of the site

10. A footer that lists key pages on the site, company address, and contact

information

11. A corporate looking theme

3

Requirements for a Company Site

Introduction

Executive Summary

We can now identify how to meet these requirements with Drupal. The solutions to

the requirements listed above are:

1. Create a page that describes the company using the page content type

2. For client projects, use custom content type

3. Use the article content type tagged as a service offering. Use an entity

reference field to link selected client projects. Expand the standard Drupal

user profile to include biographical information for staff, and use a view to

display a page of staff profiles

4. Create a taxonomy vocabulary for article type (e.g. news, blog post). Add a

term reference field to the article content type, which will enable the ability

to create news content. We will also need a view to display news articles in

chronological order (descending by date with the newest article at the top

of the list)

5. Use the aggregator module to pull and display news feeds from identified

sources on the web

6. Use the article content type with the article type taxonomy term of blog

post. We will also need a view to display blog posts in chronological order

(descending by date with the newest blog post at the top of the list)

7. Use the contact module and the contact form that is provided by that module

8. Utilize blocks and menus

9. Install a theme from Drupal.org

The first step in creating the corporate site is to install Drupal. Follow the steps out-

lined on Drupal.org to install Drupal locally, on your server, on shared hosing, or on a

solution such as Pantheon or Acquia.

The next step is to pick a theme. Your options are:

1. Create your own theme from scratch

2. Start with one of the Drupal starter themes and customize it to meet your

needs

3. Find a theme on Drupal.org/project/themes that is close to what you want.

You will need to modify the CSS and layout to meet your specific needs

4. Find a theme on one of the paid Drupal theme sites

5. Convert a theme from another CMS, such as WordPress, into a Drupal theme

6. Find a theme on Drupal.org/project/themes that meets your needs without

modification, or

7. Use one of the standard Drupal core themes

For our corporate website we’ll focus on option two, using a starter theme. A starter

theme allows us to address specific design requirements for a site. The focus of a

starter theme is typically on the foundation and not the visual design.

Visit http://drupal.org/project/themes and filter by core compatibility of Drupal.

Search through the list looking for starter themes. Some of the popular installed

starter themes are Zen, Omega, Adaptive, Basic, Bootstrap, and NineSixty. For this4

Installing Drupal

Installing and Creating a Theme

project I’ll use Basic as it provides a nice set of options and an easy to understand

structure. I’ll download Basic, following the instructions in the README.txt file to re-

name the theme “acme_co,” the name of the fictitious consulting company.

On the Site Information page (Manage > Configuration > Site information) I will set

the site name to ACME Co. The next step is to set the new theme as the active and de-

fault theme for the site (Manage > Appearance). I will set the ACME company logo as

the default theme logo (on the Appearance page click on the settings link to find the

field to upload a new logo). Then I will make a few changes to some of the elements in

the theme’s primary style sheet (styles.css). I will reload the homepage, revealing the

start of the new corporate website (see Figure 1).

Figure 1 Basic starter theme installed

The last step in cleaning up the site before launching into site building is to remove

the blocks that appear by default when installing Drupal. Click on the Structure link

on the secondary administration menu and click the Block layout link. Set all the

blocks that are set to display in a region to None. Click on the Save blocks button at

the bottom on the page when finished.

Our homepage design calls for a list of latest blog posts, latest news articles, and a list

of aggregated news feeds. We will drop each of these into a separate region at the bot-

tom of the page. We’ll need to add the regions to our theme as the Basic starter theme

doesn’t provide regions. All it takes are three quick steps to add regions:

1. In the theme’s .info.yml file (named acme_co.info.yml; your name may be

different), I’ll add three regions to the list of existing regions:

featured_1: 'Featured First'

featured_2: 'Featured Second'

featured_3: 'Featured Third'

5

2. With the regions added to the .info.yml file, the next step is to display those

regions on a page. I’ll update the page.html.twig file to incorporate those

regions into the page. I want the regions to display below the content area,

so immediately following the closing div tag for the content-area I’ll add the

following:

<div id="featured-content-area">

<div id="featured-content-area-1">

{{ page.featured_1 }}

</div>

<div id="featured-content-area-2">

{{ page.featured_2 }}

</div>

<div id="featured-content-area-3">

{{ page.featured_3 }}

</div>

</div>

The {{ page.xxxxxx }} items print the content of the regions to the page.

3. Finally I’ll create the CSS in the css/styles.css style sheet to render the

regions as 33% of the width of the page, floating each of the regions next to

each other:

#featured-content-area {

border-top: #676767 2px solid;

padding-top: 20px;

}

#featured-content-area-1,

#featured-content-area-2,

#featured-content-area-3 {

width: 33%;

float: left;

padding: 10px;

}

6

With the changes to the theme in place I’m ready to start laying the foundation and

building the site.

The corporate site utilizes the article content type for a variety of purposes: example

news articles, blog posts, and service offerings. To enable this capability I’ll create a

new taxonomy vocabulary called article type. Then I will assign the terms for news,

blogs, and service offerings. To create the vocabulary I’ll click on the Structure link in

the secondary admin menu followed by the Taxonomy link on the Structure page. To

create a new container for topic terms I’ll click on the Add vocabulary button. I’ll

name the vocabulary Topics. In preparation to assigning the vocabulary to the article

content type, I’ll add each of the terms listed to the vocabulary Topics. After creating

the vocabulary and terms the listing page for the Topics vocabulary should appear as

shown in Figure 2.

Figure 2 The Topics vocabulary

Next we need to create a new field on the Article content type. This new field will

capture the type of article being created (e.g. news, blog post, or service offering). To

create the field, navigate to the secondary administration menu and click the Struc-

ture link. From the Structure page click Content types. On the Article content type

click Manage fields and create a new field of type Term reference (use the Article

Types vocabulary as the basis of the values to be selected for this field). After adding

the field, the creating a new article screen should appear similar to Figure 3.

7

Creating Taxonomy

Updating the Article Content Type

Figure 3 Article Type added to the Article content type

The next change we’ll want to make is to turn off the option that automatically posts

new articles to the home page. I’ll create a view to control what is being displayed. To

turn off the automatic publishing feature, begin by clicking on the Edit tab at the top

of the Edit Article content type page. Then, select Publishing options from the vertical

tabs at the bottom of the form. Uncheck the Promoted to the front page option and

click the Save content type button. We’re now ready to use the Article content type to

author content.

To capture and display information about client projects, we’ll want to create the

Client Portfolio content type. The fields associated with this content type are:

1. The name of the project

2. The name of the client

3. A description of the project (using the Body field as the basis of the

description)

4. A reference to the types of services performed on this project (from the

article content type tagged as Service Offering—an entity reference to

articles tagged as Service Offering)

5. A reference to the key staff members who participated on this project

(entity reference to a user entity)

8

Creating the Client Portfolio Content Type

Return to the Content types page and click the Add content type button. Create the

fields following the steps we performed earlier when we created a new field. When

creating the entity reference field for Types of Services, select Views as the Reference

method and create a new view that lists all articles that have the taxonomy term of

Service Offering. This will provide you with a list of service offerings to select from. If

you prefer, you can create the view before creating the content type. The display type

for the view is an Entity Reference. The Settings for the Entity Reference List format

requires a field for the editor to use that will search for content to connect to the arti-

cle being authored. I will use the title field. The view that supports the requirements

is as shown in Figure 4.

Figure 4 Entity Reference view for Service Offerings

9

Since we created the view, we can now add the Entity Reference field to the Client

Portfolio content type. Figure 5 demonstrates setting the reference type to Views and

assigning the Service Offerings view as the source of the content to be referenced.

Figure 5 Service Offerings entity relationship field details

The final field we will need to create allows an editor to reference staff members

(Drupal users) who worked on the project. You can follow the same steps as when we

created the Service Offerings entity reference field, but instead of selecting Content as

the type of item to reference, select User. Under Reference Type leave Reference

method as the default, sorted by Name. Save the fields and the editorial interface for

creating a new Client Profile should look like the form shown in Figure 6.

10

Figure 6 Create Client Profile content item

We use the standard Drupal user profile for collecting and displaying biographical in-

formation for key staff members. There are fields for user name, email address, pass-

word, user role, and a photo. For our company site we will also need fields for

biography (to describe staff experience), first name, and last name. To add these new

fields navigate to the secondary menu and click the Configuration link. On the Config-

uration page, click the Account settings link in the People section. At the top of the Ac-

count settings page you’ll find a tab for Manage fields. Add fields for biography, first,

and last name using the same approach as creating fields on a content type.

1. Create a new field for biography, selecting long text as the field type

2. Create a new field for the user’s first name, selecting text as the field type

3. Create a new field for the user’s last name, selecting text as the field type

Save the changes you made. Return to the Add user form (People > Add user). You

should now see the three new fields on the Add user page (see Figure 7).

11

Expanding Drupal’s User Profile

Figure 7 User profile with new fields

One of the requirements we outlined at the beginning of this article was to collect

news articles from external websites and aggregate those articles into lists on the

company website. The Aggregator module is part of Drupal core and is a great solu-

tion to this requirement. By default this module is disabled, but you can enable it by

visiting the Extend page. Navigate to the Extend link in the secondary menu and en-

able the module by checking the box next to it. Click the Save configuration button.

Now we need to define what sources of information we will pull from. Navigate to the

Configuration page and click on the Feed aggregator link (web services section). On

the Feed aggregator page click on the Add feed button to add a news feed. As an exam-

ple I’ll use the Reuters Business News RSS feed as the source of content for the news

feed. In the Title field, enter “Latest Business News.” In the URL field, copy and paste

the URL from Reuters (http://feeds.reuters.com/reuters/businessNews). Leave the

update interval set at one hour, which is how often Drupal will query Reuters for new

news articles. Save the news feed. Next, run cron to pull the content from Reuters

(Configuration > Cron). Figure 8 shows the latest news on the ACME site.

12

Aggregating External News Feeds

13

Figure 8 The latest news from Reuters

Another requirement we defined at the beginning of this article is to have a contact

form where visitors can submit requests for information. Drupal ships with the Con-

tact module, which provides functionality to meet this requirement. Navigate to the

Structure page from the secondary menu and click on the Contact form categories

link. The Contact module creates a Website feedback form that is great for general

contact requests. On the Edit tab enter the email addresses of recipients of contact re-

quests. If you would like a message to appear to the visitor after they submit the re-

quest, enter a message in the Auto-reply text area. To see the fields that appear by

default on the contact form, click the Manage form display tab. The default fields are

the sender’s name, their email address, a subject field, a message, and a checkbox that

allows the user to request that a copy of the message be sent to their email address.

You may add new fields by clicking on the Manage fields tab. As an example, I will use

the standard fields since they address all of my company website needs.

Now that we have the foundational elements in place, we need to assemble the rest of

the site. I’ll walk through the requirements, building each section of the site using the

tools that were put together in the previous steps.

Contact Form

Assembling the Site

The first requirement is to provide an About us page. To fulfill that requirement I’ll

use the Basic page content type. I’ll navigate to the Content link in the secondary

menu, clicking the Add content button. I’ll select Basic page and fill out the title

(About Us) and the body. So visitors can easily access my new page, I will add it to the

Main navigational menu. After saving the page it appears in the Main navigational

menu and on the site (see Figure 9).

Figure 9 The About Us page

Next we will construct the Client Portfolio Page. We will use a view that displays a list

of Client profile content items, sorted in date descending order, as teasers. I will also

create a second view that randomly displays a Client Portfolio item as a full article.

I will need content to work with when creating the views, so the first step is to create

several Client Profile content items. Each item links to one or more Service offerings

and one or more staff members. I’ll first create several Service offering content items

using the Article content type, selecting Service offering as the Article Type being cre-

ated. To create the Service offerings I’ll navigate to the Content link in the secondary

menu followed by the Create content button. To create the Drupal user accounts for

the staff members, I’ll navigate to the People link in the secondary menu followed by

the Add user button.

I have successfully created my first Client profile. The Type of services reference field

works like a search filter. When you type in the first few letters, the view we created

returns a list of Service offering content types. The same goes for the Key staff field

(see Figure 10).

The About Us Page

The Client Portfolios Page

14

Figure 10 A Client profile content item

I am ready to create the view that will be used on the Client Portfolios page. I’ll begin

by creating a generic view that is tied to Client profile content type. I will then add

various view displays. The first display that I will add is a Page. For the page I will add

a path, link it to the Main navigational menu, and show content as a teaser (see Figure

11).

15

Figure 11 The Client Portfolio view display

After creating the Page, I will add a block. The block will list a single Client profile con-

tent item displaying the full content, of one client profile randomly selected. I will

need to make changes to this block’s display. To do so, click on the Add button in the

Displays area, and select the block. Changes are:

1. Change the Display name from block to Featured

2. Change the title to Featured Client Project, and add a Title to the page

display: Client Portfolio

3. I’ll change the Format so that it shows the Default display instead of the

Teaser

4. I’ll change the Sort criteria, removing the sort by Post date and adding a

Random sort

5. I’ll change the pager to display a single item

6. And finally I’ll save the view

The end result is a block display for the featured Client profile that I can then add to

the Sidebar Second region through the Block layout page. To do this, I will navigate to

the Block layout page and select Client Profile: Featured block from the Place blocks

column. I will set the region to Sidebar second. I will also make sure and set the block

to only display on the Client portfolio page.

16

Figure 12 The Client Portfolio page

I will next create the Service Offerings page. This will consist of a view that displays

teasers of all Article content items that have the taxonomy term Service Offering. I’ll

add a path to the view (service-offerings) and link it to the Main navigational menu.

The view as it is set up should look like Figure 13.

The Service Offerings Page

17

Figure 13 Service Offerings view

I will use views as the mechanism for displaying user profile information on a page. I

need to add a new user role called staff and assign each staff member to that role. To

create the new role I’ll navigate to the People link in the secondary menu and then

click the Roles tab at the top of the screen. I’ll click on the Add role button and will

enter a new role called Staff. Then I’ll click on the List tab to return to the user list. I

will use a feature called Views bulk operations to assign all users to the Staff role. Fig-

ure 14 shows how to assign users to the staff role. Check the box next to each user and

select “Add the Staff role to selected users” from the With selection drop down list.

The Key Staff Members Page

18

Figure 14 Assigning users to the Staff role

After clicking the Apply button the users I checked are now assigned as staff, making

it easy to use views to extract the list of user accounts to display as key staff members

on the site.

To create the view I need to begin by visiting the Add new view page and selecting

Users from the Show select list in the View settings area. I’ll make sure to click Save

and continue. I’ll add a Page display, using staff as the URL, and then add the page to

the Main navigation menu. I’ll add a Title to the view, set the Format to Grid, and will

display three users per row. I am going to use specific fields to construct a gallery of

staff. The three fields that I’ll add to the view are the user’s photo, First name, and Bi-

ography. I’ll remove the Name field that was added by default, and trim the user’s bi-

ography to only show the first 300 characters. I need to add a Filter to show users

who are staff. After all these changes I can save and examine the view (see Figure 15).

19

Figure 15 The Key Staff page

To achieve the look I wanted for the page, I added a few CSS attributes to the styles.css

style sheet. Specifically I made the name bold and slightly bigger than normal text and

added padding to the view columns. I also created a new image style (Configuration >

Image styles) called Profile. I scaled and cropped the images to 250px wide and 225px

high. I edited the view and assigned the new image format to the photo. I also updated

the image attributes on the user profile to accept larger photos. I removed the restric-

tions placed by Drupal by blanking out the values found on the Picture settings for

User (Configuration > Account settings > Manage fields). The end result of these

minor modifications is what is shown in Figure 15.

20

Earlier in this article I added a taxonomy term for News to the Article type taxonomy

vocabulary. This provides the ability to use the Article content type as the template for

authoring news. To test out my view I will create a few sample news articles. I’ll create

a new view for News, creating a Page display that provides a link to the News page.

This view lists Articles filtered by the taxonomy term News. These Articles are sorted

by publication date in descending order so that the newest item is always at the top.

I’ll use teasers as the format for the output and I’ll set the title of the Page display to

Latest News. I’ll also create a block display for the homepage that lists only the latest

five news articles titles and publish dates. The output of my news page is as shown in

Figure 16.

Figure 16 The News page

One of the requirements is that staff should have the ability to blog. Each staff will

have the ability to publish blog posts to the site. To make a blog post, the staff needs to

log into the site and author Article content, selecting Blog Post as the Article Type

(you will need to add Blog Post to the Article Type taxonomy vocabulary if it isn’t al-

ready there). I will author a few blog posts so I can create and test a view that displays

Blogs.

I’ll follow the same pattern for Blogs as I used for News. I will create both a page for

displaying all blog posts and a block for displaying just the latest on the homepage. I’ll

set the path for the page display to blogs, and I’ll add the view to the Main navigation

menu.

News Articles

The Staff Blog Page

21

The next step is to add the contact form to the Main navigation menu (Structure >

Menus > Main navigation). To do this I will need to edit the menu. I will click the Add

link button, adding a new menu item called “Contact Us” with a path of contact.

The footer will display the Main navigation menu, company address, and contact in-

formation. All three elements will be displayed using blocks via the Block layout. The

Main navigation menu block already exists, so I only need to create custom blocks for

the company address and for contact information. I will assign all three blocks to the

footer region.

Next it’s time for a little CSS work to make the blocks appear left to right instead of

stacked on top of each other, and to change a few colors. After the CSS updates the

footer is ready for production (see Figure 17).

Figure 17 Site footer

The final step is to create the homepage. It will consist of a few parts—a simple intro-

ductory paragraph that describes the company, a list of the latest blog posts, a list of

the latest news items, and a news feed created by the aggregator.

I need to assign some blocks to appear on the homepage. To do this I will need to visit

the Block layout page. First I will assign the News: Homepage News block to the Fea-

tured First region (I will specify that I only want the block to show on the homepage

by using <front> as the value entered in the Show blocks on specific pages text area).

Next I’ll assign the Blog: Homepage Blog Posts to the Featured Second region, also set-

ting the block visibility to only show on the homepage. I’ll assign the Aggregator feed

block to the Featured Third region, also setting block visibility to only show on the

homepage. I will override the default title to Latest Business News, and set the num-

ber of items to display to five.

The last item to add to the homepage is the introductory paragraph that describes the

company. This helps to demonstrate how to add content to the homepage. I’ll use a

standard Article as the source of information about ACME. I will need to force the arti-

cle to appear on the homepage. To do this I will check the Promoted to front page op-

tion on the Promotion options section of the Article edit form.

Adding the Contact Form to the Main Menu

Creating the Footer

22

Creating the Homepage

The last step is to update the Frontpage view to display the default view of content in-

stead of the teaser. The result of all of the work is a great start to a corporate website.

Figure 18 The homepage

23

In this article I covered the methodology for creating a new corporate website using

Drupal. The site we created through this article may be the end-all website for a com-

pany, or it might represent the starting point for something big. With Drupal all things

are possible and you are only limited by your imagination and the amount of time re-

quired for building your dreams.

This concludes another article in the series, "Building Websites with Drupal: Learn

from the Experts." To view more articles in the series, please visit

www.unicon.net/about/articles.

This article is a great resource for creating Drupal 8 Company websites. However, the

task of creating a site might be more demanding if lack of time and resources are at

play. One way to remedy this is to enlist a third-party vendor to develop and design

the Drupal website. Unicon, a third-party vendor providing services for Drupal, is

there to help along the way with services including:

• Consulting

• Content Strategy

• Hosting and Managed Services

• Migration

• Systems Integration

• Upgrades

• User Experience Design

Unicon is a proud member of the Drupal Association, and is a provider of IT

consulting, services, and support for corporations looking to build a Drupal 8

Company website.

Visit www.unicon.net/opensource/Drupal for more information on Unicon services

for Drupal.

Summary

Conclusion

1760 East Pecos Road, Suite 432Gilbert, AZ 85295480.558.2400 Phone480.558.2320 Faxinfo@unicon.netwww.unicon.net

24