Drupal: Configuring Your Installation

Welcome to the second part of a series on building web sites with Drupal. Now that you have installed Drupal in the Ubuntu local host as part of your web development activity (discussed in the first article in this series), you are ready to customize your website’s look according to your design. This will be covered and discussed thoroughly in this tutorial.

If you need to, you can review how to install Drupal.

Adding Static Home Page Content in Drupal

In any website (though not a blog), it is extremely important to have static home page content. This will serve as the most important landing page for your website visitors coming from search engines and other websites.

The default Drupal installation requires you to add text content on the home page to replace the default home page text (which is Drupal-related).

To do this, follow the steps below.

Step 1 Log in as administrator to your Drupal website (use the username and password created in the first part of this tutorial).

Step 2 Once logged in, click "Create Content" and then click "Page." As discussed in the first part, "Page" is appropriate for non-blogging related content because it is static in nature and does not allow user comments.

Step 3. Enter the title and body of the content. For the title, use an SEO friendly title tag, something that mentions the services you are offering, e.g.  "About our travel agency."

For the body content, write at least 150 words, enough to explain your services. For this example, suppose you’d like the "About" page to be the home page content because it directly explains your services and contains company background information.

Step 4. Click "Menu Settings" to expand.

Step 5. For the "Menu Link Title," enter "Homepage." You’re doing this because you would like to use the text "Homepage" for the home page anchor text link in your Drupal web navigation.

Step 6. Under "Parent Item," select "Primary links." This will enable the links to display on the top navigation of your default Drupal theme, which is good because it is prominent to your website visitors.

Step 7. Leave "weight" at 0 (do not adjust, optional).

Step 8. Now click "Publishing Options." Make sure that these two options are checked: "Published" and "Promoted to front page." The latter is required to make the content appear on your home page.

Step 9. Finally, click "Save."

Step 10. Now go to your Drupal front page in the local host: http://localhost/drupal/

You will see the front page content; however, it will not show all of the content, and you still need to click the "Read more" link to view the complete content. Now click "Read more" to go to the specific page URL.

Take note of the URL. It should be something like this: http://localhost/drupal/node/1

Step 10. Go to "Administer" ==> "Site Configuration" ==> "Site information."

Step 11. Under "Site information," scroll down to the bottom until you see the "Default front page" option.

Step 12. In the text box, enter node/1 if your page URL in step 10 was http://localhost/drupal/node/1

This will enable Drupal to assign the content of this URL: http://localhost/drupal/node/1  to appear completely, as home page content.

Step 13. However, the home page content will be duplicated; it will appear both in http://localhost/drupal/ and http://localhost/drupal/node/1. You need to 301 redirect http://localhost/drupal/node/1 to http://localhost/drupal/

Step 14. Go to your Drupal directory in XAMPP htdocs, and in the root directory, open index.php using your favorite PHP editor.

Step 15. At the topmost part of the script, you can 301 redirect  http://localhost/drupal/node/1 to http://localhost/drupal/ using the code below:

<?php
function getPostURL() {
 $postURL = ‘http';
 if ($_SERVER["HTTPS"] == "on") {$postURL .= "s";}
 $postURL .= "://";
 if ($_SERVER["SERVER_PORT"] != "80") {
  $postURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
 } else {
  $postURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
 }
 return $postURL;
}
$postURL=getPostURL();
if ($postURL==’http://localhost/drupal/node/1′) {
Header( "HTTP/1.1 301 Moved Permanently" );
Header( "Location: http://localhost/drupal/" );
}
//The rest of the index.php script here

The script works by getting the URL to be displayed on the browser using PHP, and then, if the URL request sent to the Apache server is equal to http://localhost/drupal/node/1, it will be 301 redirected to the root Drupal home page: http://localhost/drupal/

Important: Note that you will be replacing the local host version of URLs in the script above with the real domain URL once your Drupal website is uploaded to your web hosting server.

Step 15. After doing this, you will have a fully working home page, and the page URL for your "About" page will be 301 redirected to the correct home page URL.

Screen shot:

{mospagebreak title=Adding Other Static Pages}

OK, now that you have completed the home page, your next task is to add two common pages, the "Contact" and "Terms & Conditions" pages. The procedure is as follows:

Step 1. Log in as administrator to add content.

Step 2. Click "Create Content."

Step 3. Click "Page."

Step 4. Enter the title and the content of those pages.

Step 5. Click "Menu Settings" to expand.

Step 6. Under the Menu link title, you can enter "Contact" for Contact pages or "Terms" for the Terms and Condition page.

Step 7. Under "Parent Item," select "Primary Links."

Step 8. Leave "weight" at its default value.

Step 9. Go to "Publishing Options." Make sure that "Published" is checked but NOT "Promoted to front page."

Step 10. Click "Save." This will publish the content to your Drupal website.

Take note of the default URL generated by Drupal for both the Contact and Terms & Conditions pages, e.g:

Contact page URL: http://localhost/drupal/node/2
Terms and Conditions page: http://localhost/drupal/node/3

Keywords in the URL for Your Drupal Website

You might notice that the URLs in the previous section for contact and terms & conditions pages are not SEO friendly. They do not use keywords in the URL, which has some impact in terms of search engine optimization.

Suppose you would like to do the following conversion:

http://localhost/drupal/node/2 ==> http://localhost/drupal/contact
http://localhost/drupal/node/3 ==> http://localhost/drupal/terms

To do this, you need to enable the "Path" module in your Drupal module administration page.

1. Log in as administrator.

2. Go to "Administer" ==> "Site Building" ==> "Modules."

3. Scroll down and find the "Path" module. Check it and then click "Save Configuration" to enable the module.

Now, go to "Administer" ==> "Site Building" ==> "URL aliases." If you do not find "URL Aliases," then you have not correctly enabled the "Path" module.

Let’s change the URL of http://localhost/drupal/node/2 to http://localhost/drupal/contact.

1. Click "Add Alias."

2. Under Existing System Path:, enter: node/2

3. Under "Path alias" enter: contact

Make sure there are no spaces before or after the aliases and path.

4. Click "Create new alias."

Screen shot:

Repeat the steps from 2 to 4 for the terms and conditions page. Now log out from your website as administrator. You will notice that the URLs for the contact terms and conditions pages are now keyword-based.

Rearranging Primary Links in Navigation Menu and Changing Logo

Suppose you would like to arrange from left to right, by order of importance in the top primary link navigation: Home page — Terms — Contact. You can rearrange by first logging in as administrator then going to Administer ==> Site Building ==> Menus ==> Primary Links.

Use the cross symbol to move the menu item either up or down according to your own choice. To implement this change, click "Save configuration."

To change the logo of your Drupal website (which uses the Drupal logo as its default), go to this path: htdocs/drupal/themes/garland (since the example in this tutorial uses the Garland theme by default).

Replace logo.png with your own logo while maintaining the logo image dimensions and file type.

Log out as administrator and then refresh your Drupal website in the web browser. It should look like the screen shot below.

In the third part of this tutorial, you will learn about working with themes and modules in Drupal.

[gp-comments width="770" linklove="off" ]

chat