building your first drupal company site
TRANSCRIPT
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 [email protected]
24