Changing the front page

A question that comes up a lot is how to change your front page. People are looking for something called index or index.htm, since that is how they've controlled the front page in their sites previously.

Drupal does not work that way. There is not an "index" page, and no pages have .htm or .html after them. They don't have a .anything at all. Page names are things like:

/node/24
/home
/events
/2007/05/28/act_blue_contributions_now_available

The one thing you should know is that you shouldn't put any spaces in web site names (otherwise known as URL aliases or a URL path). Instead, use the underscore or dashes so that all web browsers and e-mail programs handle the links properly. Personally, I like to use underscores because then the address is easily read by the eye, but it's a matter of personal preference.

Ok, so now what do I do?

So now that you know there isn't an index page, how do you change your front page? You actually have two options:

  • A front page that only houses one node.
  • A front page that houses "teasers" to a variety of different nodes.

I'll now go over the differences, an example of each, and how to do it.



A front page that only houses one node

You would use this if you want to have a traditional front page. This may be using tables or div elements, if you'd like, to create a front page. This means your front page probably doesn't change that often -- it's more likely to be very little lengthy text (maybe a welcome) with links off to other content. Or you may have a node on the front that only changes sometimes but is surrounded by block regions that include content that changes regularly.

front page one node

page with one node and regions

Front page with one node that only changes sometimes.
All of the content in the main area of this page
is
controlled via one node.
(Click image for full-size version)

Front page that has two block regions above the
one node that only changes sometimes.
The two blocks above change regularly.
(Click image for full-size version)

 

The center portion of the first front page is a node that uses tables. You'll notice that when I am logged in, I get tabs above the main portion of the site (view, edit, outline, etc.). To change the content on the front page, I just click the "Edit" tab. None of these tabs are viewable to those who aren't logged in or who don't have permission to do those actions.

The center part of the second front page is a single node, but there are also blocks set in the regions above the node. This allows the front page to change more often while still leaving the main content fairly consistent.

To create this kind of front page, first create your node. I use the "basic page" content type. Be sure to set the URL path to something obvious like "home" (or even "index," if you'd like). I use "home" because it works well with search engines.

Then go to the "Site Information" page, which is located at Configuration » System » Site Information

Scroll down to the middle of that page. There you'll find a setting for the default front page. Change "node" to whatever you used as the URL path for your page:

Default front page setting screenshot

Hit "Save Configuration."

This will now change your front page.


A front page that houses "teasers" to a variety of different nodes

Your second option is a page that changes whenever you "promote" an item to the front page.

An example of this type of site is Blog for Oregon.
You'll have to look at the screenshots as opposed to going to the real page since the organization closed down some time ago and the site is now run by someone else.

Blog for Oregon screenshot
(Click for larger image)

The address to this page is /node.

You'll notice this page has two nodes visible in the screenshot (there are 10 in total). These nodes show up on the front page because they have been "promoted" to the front page. The number of these that show on the front page is controlled at the same place as where you set the information about the default front page (see image above).

Obviously more than 10 nodes have been promoted to the front page in the year+ that the site has been online. You can get to older items via links at the bottom of the front page:

bottom of page screenshot

There's also an icon (the orange one on the left) that gives site visitors access to the RSS feed for your site.

Any time you add an event, blog entry, page, etc., you can have it be "promoted" to the front page. If you don't have teasers set up on your site, it will automatically pull the first 600 characters. Where you change this is different in Drupal 7. Go to: Structure » Content Type » (content type to be changed) » Manage Display » Teaser

What you want are the options for "Body":

Change teaser length

Click on the widget to the right, which will open up more options and you can set the length in characters of the teaser for that content type. This allows you to set teaser lengths differently for each content type.

You can also control what is pulled as the "teaser" by using an html comment that tells it where to break. That comment is: <!--break-->

If your WYSIWYG toolbar is available, you can also click on the "page break" icon to create the teaser comment for you.

teaser break

An html comment is a piece of text that does not show up on the page (but can be seen in the html). Typical uses are for documentation.

If you insert that text where you want the teaser to end, it will use that instead of the first 600 characters.

Note: You must add that comment when the rich-text editor is off. This means clicking on "disable rich-text" under the text area.Otherwise the editor just sees the comment as text.

disabling rich text screenshot

Items will be added to your front page in date order, newest first. Any item that has been set as "sticky" will be placed at the top of the page, regardless of age.

You'll find the "promote to front page" and "set as sticky" options at the bottom of your page creation/edit screen under "Publishing options."