Building a Website with Drupal for Newbies – Building Your Site

This is the fourth in a series of posts on how to build a Drupal website from scratch. My apologies for the delay in getting this installment out, a lot has been happening on the home and work front that sort of slowed me down, but here we are.

In the first segment we introduced Drupal, and went over what we would need to work with Drupal. In the second part, we went over how to install Drupal, and finally, in the third section we set up the Drupal site, changed configurations, and did some other cool stuff. If you have followed the tutorials this far, you should have your website all set up, with your desired settings and names, headers, logos, etc in place. As you know, I am creating a website in tandem with this tutorial, and everything that I do on that site I will describe here in this series and also in future Drupal related posts. The website is http://drupalpad.maryspad.com, and you can check it out to see how far things have progressed and compare it to your site.

Now that you have your site configured, and all the basics in place, the next step is to start building your site. At this stage, our site is still very basic looking, with the Drupal front page introducing the site. For now, let’s leave that as it is. Soon I will show you how to put something else there when we delve into content creation and content management. For now, let’s add some important components.

In the admin screen, click “Site Building“. Here you will see four sections: Blocks, Menus, Modules, and Themes.

Blocks allow you to configure your layout, and set different things in different regions of your site. For example, you may want a list of rss feeds from a different website to appear on the left side, and an ad block to appear on the right side. All these can be set using blocks. The available regions available to you will depend largely on the theme you use for your website. Some themes are built with more regions than others. In the Blocks page, as I mentioned, you will see what regions are available to you highlighted or surrounded by a dashed border on the page. You will then be able to scroll through the enabled features on your site and assign blocks to regions. We will explore how to do this in this tutorial.

It’s important that you decide how you want your website laid out before you select a theme, because then you can select a theme that makes all the blocks and regions you want available.

Menus helps you to create and control the different menus through which users will navigate your site. The Drupal default install comes with the Navigation menu all set up on the left side. You can change or disable this as you please, and can even change what items appear in the Navigation menu. You can also create your own custom menus and place them in different regions as you please, and add items to them.

Modules add functionality to your website. There are many modules, some which come pre-installed, and many many more that you can download and add, to enhance and really make your website powerful. Some modules that come preinstalled are Forums, Aggregators, etc. We will be exploring and enabling some modules shortly. Installing new modules is usually pretty straightforward, and modules will come with instructions.

Themes are what determine the overall appearance of your site and distinguish it from another website. The default drupal 5.7 install comes with the Garland theme, which is the same theme that the Drupal website currently uses. You can change the theme by selecting and enabling a new theme, and making it the default. We will do this later as we continue creating our website. The Drupal install comes with a few themes, but you can explore and find many other themes at the Drupal website, and on other websites. A simple search in Google will yield many different sources of themes. You can also configure the Garland theme and have different colors.

Remember that changing your theme needs to be done when you’ve decided how you want your website laid out so that you can select a theme that enables the regions you need to place blocks on. For the meantime, we will keep the Garland theme on our site and change it a bit later.

There are some changes we can make immediately though without necessarily changing the theme, and these include changing the site logo and the favicon shortcut icon (referred to in Drupal as the Shortcut icon). We do this by doing a global theme configuration, which basically means that these changes will be applied regardless of the theme we’re using.

NB: I have seen some themes that override global theme settings, so when you enable a new theme, make sure to go through and make sure everything is as you want it.

OK, enough theory. Let’s make some changes to our website.

Making Global Theme Changes
While in the Site Building page, click Themes. You will see a list of available themes. Go into the default theme, in this case Garland, and click “Configure”. Only themes that have been enabled (square box ticked) are configurable. You will see the different configuration options available for your theme and you can explore them further. For now we want to change global settings that will apply to all themes, with the caveat mentioned above. So at the top, under Themes, you will see “Global Settings”. Click on that.

Here you will see the global settings, such as whether you want to the logo, site name, slogan, etc to appear. Make your selections. On the right, you’ll see the option to allow content to show “submitted by Username on date” information. For now, if you’re a Drupal newbie, leave this as it is, and we will revisit it when we start working on content.

Further down the page are settings that you will want to change to further give your site it’s own identity. The Logo image setting allows you to change the default Drupal Logo on the top left side of every page to your own logo, if you choose to have a logo. Uncheck the “Use the default logo” box. If you have an image on your computer that you want to use as a logo, you can upload it here, or else link to it if it’s on another location on your webserver using the path to custom logo.

PS: You may find that you’ll need to resize your image to fit the space designated by the theme. What I usually do is right click on the image on the logo image and select properties, which allows me to see what size the default image is and then resize my own image appropriately before uploading.

The next step is to change the shortcut icon (or favicon) if you want to use one. This the is the icon that will appear next to your url name in the browser bar and next to your website name in the browser tabs. Again, you need to have created a favicon already, and have it somewhere. Uncheck the “Use the default shortcut icon” box and upload or link to your own favicon.

Then click “Save Configuration” to save your changes, and then navigate to your website url to see the changes. You may need to refresh the page or empty your cache to see the changes.

Hint: At this point, if you’re tired of the blue garland look, you can make one more change to make your website not look so default. The Garland theme allows you to make some color changes, so that while you’re still working with the same theme, it does look a little different. Go back into themes, and configure Garland. You will see an option to change theme color. Some themes come with this functionality that allows you to change theme color. Select the colors of your choice, either by using the drop-down box to select a predefined color set, or by selecting Custom and changing colors for the different parts of the theme, the base color, the header, etc. Experiment to see what you like and voila! Your site looks even more unique!!

For my sample site, I have removed the logo and the favicon, and changed the theme color to blue. Perhaps later I will find a nice graphic to add as a logo that matches whatever theme I finally settle on, but for the moment I am content with having no logo or favicon until I have fleshed the site out some more.

Working With Modules
We have now built our site to the point where we have the website name, logo, and favicon all set up. Our website is starting to look distinct and more unique. We are now going to work with modules. Modules allow you to expand the functionality of your website. They are powerful and can make your website do a lot of wonderful things. Being a relative Drupal newbie myself, I am still exploring all the modules on the Drupal website and seeing how I can use them in different ways on my websites. As I mentioned, the default Drupal install comes with some modules preinstalled. Some of these are enabled and some we will enable on an as-needed basis. At the end of this tutorial, I will talk briefly about how to add new modules and enable them.

For now, let’s look at what modules are available and see what we can use for our new website. In the admin mode, select “Site Building” and click on “Modules”.

You can see the long list of modules available. It would be redundant and a waste of time for me to list them and their descriptions here. Take a quick look at them. You will see some of the modules depend on other modules and require them to be enabled, while other modules are required by other modules. or example, the Forum module requires that the Taxonomy and Comments modules be enabled, which they are by default.

Depending on what you want your website and website users to do, you can enable or disable these modules to create the functionality you want. For our sample website, we would like to be able to have feeds from other websites, such as the latest news headlines, appear on the front page. For this to work, we need the Aggregator module to be enabled. You could also use this module to show feeds from your blog, etc. We also want to be able to have user polls, where we will create questions and have users vote on them. We want visitors to be able to search our website for the information that we need, and we want a contact form so visitors can send us a message without knowing our email address. Contact information on a website is important because it allows your visitors to give you useful and sometimes uplifting feedback, to share their thoughts, ask questions, and even let you know when something is broken. It’s better not to have an email address on your website, because then spambots can pick it up and you end up with a lot of junk in your email. So a contact form is useful for this purpose. OK, so let us check the boxes for the modules we’ve decided we want: Aggregator, Contact, Search, and Polls. One more module that I want you to select is Path. The Path module allows us to use Url aliases. Remember in the earlier tutorial I mentioned that beyond creating clean urls that didn’t have the ?q characters in them, you could also make the urls search engine and user friendly by making them match the page content? This is what the Path module does. So select that one too.

Once they’re selected, scroll down the page and click “Save Configuration.”

Hint: If you’re in an adventorous mood, go ahead and select other modules that you want to play with. I just chose some basic ones to work with for the tutorial, but don’t let my wimpiness deter you. For example, you may be ready to jump right in and add a blog! Well, good for you, go for it!!

Hint2: There is another module, related to the Path module, known as the Pathauto module. The Pathauto module extends the path module by automatically creating the url alias based on your content title. You have to download this module from the Drupal website and install it manually as it’s not part of the default install, and in addition you need the Token module for this to work.

We will play with these modules as we continue setting up our site and creating content.

Extra: Adding New Modules to Your Drupal website
Adding new modules that are not part of the Drupal install (such as Pathauto and Token mentioned above) is a relatively straightforward process.
1. Download the module you want to use from the Drupal website onto your computer.
2. Unzip the archive into a folder, and see if there is a readme or install text file that describes how to install the module. If there is, follow the instructions to get the new module working on your website. If there are no instructions, the following shoud work.
3. Using your favorite FTP program, go into your website folder, navigate to sites, and then to all. You should upload all modules and themes into this folder. This comes in handy if you ever use Drupal’s multisite feature, (which is too advanced for me to cover in this series of tutorials). It’s also the recommended practice. In the Sites/All folder, create two folders (if they don’t already exist). Call one Themes, and the other Modules.
4. Upload the folder with your module into the Sites/All/Modules folder.
5. To make sure the module is successfully uploaded, go into the admin page, Site Building, Modules, and scroll down to see if the module you just uploaded is available. If you see it then the upload process was successful and you can now go ahead and enable your module.

In the next tutorial, we will look at content types and content management, and start adding some content to flesh out our site. We will also work with our menus and the modules we enabled to make our site more functional and usable.

Bonus: Change the front page content

Because we’ve come this far and the site is looking good, why don’t we go ahead and change the content on the first page so we get rid of that default Drupal stuff? Click on Create Content in your left side navigation menu. I will talk more about the different content types in the next installment, and go into more detail on content creation and management. For now, just click on Story, and then type in whatever you want. You could do an introduction to your website, such as I did at the Drupal Pad, or something else, whatever tickles your fancy.

If you scroll down the page, you’ll see right below the content editor several lines of text, these are collapsible regions with options that you need to look. Again, we will go into all these in more detail later. For now, click on Input Format. You only need to change this if you added any HTML formatting to your text, such as I did in adding links, in which case you should select Full HTML formatting. Don’t worry about the URL path settings for now or any of the others except for Publishing Options. Click on that and make sure the options “Published” and “Promoted to front page” are selected. Then click “Submit”.

If all goes well, you should see what you just typed with the text ” Your Story has been created.” at the top. If you now click on your website name in the header you should see your website as someone would see it if they typed your url into the browser.

Congratulations, your new website is taking shape! In the next tutorial we will look at content types, content creation, and content management and add some more content to our site, as well as using some of the modules we enabled earlier, plus some other cool stuff.

As always, I welcome any questions and feedbacks you have.