Building Your First Drupal 8 Company Site

Transcription

1 Building Websites with Drupal: Learn from the Experts Article Series Building Your First Drupal 8 Company Site by Todd Tomlinson July, 2014 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:

2 Table of Contents 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 2

3 Executive Summary 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 Company 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 including 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. Introduction 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 excellent platform for quickly and effectively creating a company s online presence. This article will build on the concepts covered in previous articles, focused on building a marketing-centric website for a wide variety of companies. Requirements for a Company Site 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

4 Installing Drupal 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 outlined on Drupal.org to install Drupal locally, on your server, on shared hosing, or on a solution such as Pantheon or Acquia. Installing and Creating a Theme 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. 4 Visit 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 this

5 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 rename 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 default 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 bottom 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

6 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: # px solid; padding-top: 20px; } #featured-content-area-1, #featured-content-area-2, #featured-content-area-3 { width: 33%; float: left; padding: 10px; } 6

7 Creating Taxonomy 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 Updating the Article Content Type 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 Structure 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

8 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. Creating the Client Portfolio Content Type 8 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)

9 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 article 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

10 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

11 Figure 6 Create Client Profile content item Expanding Drupal s User Profile We use the standard Drupal user profile for collecting and displaying biographical information for key staff members. There are fields for user name, address, password, 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 Configuration page, click the Account settings link in the People section. At the top of the Account 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

12 Figure 7 User profile with new fields Aggregating External News Feeds 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 solution 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 enable 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 example 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 ( 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

13 Contact Form 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 Contact 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 addresses of recipients of contact requests. If you would like a message to appear to the visitor after they submit the request, 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 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 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. Assembling the Site 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. 13

14 The About Us Page 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 The Client Portfolios 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 created. 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). 14

15 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

16 Figure 11 The Client Portfolio view display After creating the Page, I will add a block. The block will list a single Client profile content 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

17 Figure 12 The Client Portfolio page The Service Offerings 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

18 Figure 13 Service Offerings view The Key Staff Members Page 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. Figure 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. 18

19 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 Biography. I ll remove the Name field that was added by default, and trim the user s biography 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

20 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 restrictions 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

21 News Articles 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 The Staff Blog 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 already there). I will author a few blog posts so I can create and test a view that displays Blogs. 21 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.

22 Adding the Contact Form to the Main Menu 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. Creating the Footer The footer will display the Main navigation menu, company address, and contact information. 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 Creating the Homepage The final step is to create the homepage. It will consist of a few parts a simple introductory 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 Featured 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 setting 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 number of items to display to five. 22 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 article to appear on the homepage. To do this I will check the Promoted to front page option on the Promotion options section of the Article edit form.

23 The last step is to update the Frontpage view to display the default view of content instead of the teaser. The result of all of the work is a great start to a corporate website. Figure 18 The homepage 23

24 Summary Conclusion 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 company, 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 required 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 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 for more information on Unicon services for Drupal East Pecos Road, Suite 432 Gilbert, AZ Phone Fax info@unicon.net 24