Welcoming your Visitors: Creating Attractive Home Pages and Overview Pages

Exclusive offer: get 50% off this eBook here
Joomla! 3 Beginner’s Guide

Joomla! 3 Beginner’s Guide — Save 50%

A clear, hands-on guide to creating perfect content managed websites with the free Joomla! CMS with this book and ebook

$29.99    $15.00
by Eric Tiggeler | May 2013 | Beginner's Guides Joomla! Open Source

In this article by Eric Tiggeler author of Joomla! 3 Beginner’s Guide, we will:

  • Customize the home page settings

  • Create a different kind of home page

  • Create and tweak category overview pages

  • Create different layouts for different types of overview pages

So, let's start tweaking the CORBA home page!

(For more resources related to this topic, see here.)

Up to now, you've set up the home page and category overview pages using the default options. But you may have noticed that Joomla offers dozens of options for these page types. Changing these options can completely alter the way content is presented. In fact, different settings can create very different looking pages.

To effectively welcome your visitors and entice them to read your valuable content, we'll create a better home page and effective category pages. In the following screenshots, you'll see the page types we're talking about. The basic layout of both home pages and overview pages is similar. On the left-hand side is the example home page in the default Joomla installation, on the right-hand side is an example category overview page found via the About Joomla menu (Using Joomla | Using Extensions | Components | Content Component | Article Category Blog):

Why do you need overview pages, anyway?

Typically, Joomla will lead your site visitor to a category content in three steps. Between the Main Menu and the actual content, there's a secondary page to show category contents. You can see how this works in the following set of screenshots:

A visitor clicks on a menu link.

They are taken to an overview page with article previews inviting them to click Read more links.

They click to read the full article.

As you can see, what's on the home page and the overview pages (and how it's presented) is vitally important to your site. It's the teaser texts, images, and hyperlinks on these pages that offer your visitors a first glimpse of the actual content. Of course, people don't always arrive at your site via the home page. Search engine results might take them directly to any page— including overview pages. One more reason to make those pages as enticing as you can!

Overview page, landing page, secondary home page?

Joomla doesn't have a name for overview pages. Among web builders they're also known as start pages, category pages, department pages, or landing pages. Whatever you like to call it, it's the same thing: a navigational page that provides an overview of site categories. In this book we'll call them category overview pages.

Creating the perfect home – mastering home page layout

By default, the homepage of any Joomla site is set up to display the following items:

  • One introductory article text over the full width of the mainbody

  • Three intro texts in three columns

As we haven't changed any of the homepage layout settings up to now, the example site homepage has the same layout.

This default setup is suited for many types of content-rich sites. But you're certainly not limited to displaying this one particular combination of intro texts and links in the central part of the home page (the "mainbody", as it is called in Joomla). There's a vast amount of choices on how to display content on the home page, and what to display.

Changing the way the home page is arranged

It's your client on the phone, telling you that—happy as they are with their new site—some CORBA staff members find the home page layout too distracting. They don't like the newspaper look that displays the content columns in different widths. Would you be so kind as to tone things down a little? If you could quickly show them an alternative layout, that would be fine. You hang up and dive into the homepage settings.

Time for action – rearranging the layout of articles on the home page

You decide to rearrange the items on the home page. Let's say you want a maximum of two intro texts, both in just one column. Apart from this, you would like to show a few hyperlinks to other articles that could be of interest to visitors browsing the home page. You may wonder where Joomla stores the home page settings. As we've seen in previous chapters, menu link settings often determine Joomla's page output—and this also holds for the Home link in the main menu. This menu link is of a specific Menu Item Type, Featured Articles. To change the appearance of the home page, we'll customize the Home menu link settings.

  1. Navigate to Menus | Main Menu. In the Menu Manager, click on Home to enter the screen where you can edit the menu link settings.

  2. Click the Advanced Options tab. In the Layout Options section, the current settings are shown as follows:

    These are the "magic numbers" that determine the page lay-out. There's 1 leading article (which means it's displayed in full width), intro articles are shown in 3 columns, and there are 0 links to articles.

  3. Change the values as follows: set # Leading Articles to 0, # Intro Articles to 2, # Columns to 1, and # Links to 4. This way just two articles will be shown in a single column and the rest of the featured articles is displayed as a set of hyperlinks.

  4. Save your changes and click on View site to see the changes on the frontend. There are now two full-width intro texts. Although you have set # Links to 4, beneath the intro texts only two article links are displayed. This is because up to now only four articles have been assigned to the home page. If you'll assign more articles to the home page, this list will grow to a maximum of four hyperlinks.

What just happened?

The settings of any menu item allow you to influence the look of the hyperlink's destination page. By default, the Joomla Home link of the main menu is of the Featured Articles Menu Item Type. In this case, you've tweaked the layout options of the Featured Articles menu link to change the home page mainbody. The magic numbers of the Layout Options section are really powerful as different values can completely change the way the page content is displayed.

Have a go hero – tweak home page layout options

Joomla offers you dozens of settings to customize the home page layout. Navigate to Menus | Main Menu | Home and click the Advanced Options tab to have a look at the different option panels, such as Layout Options. First, you will probably want to set Pagination to Hide. That way, you'll hide the pagination links (< Start Prev Next Last >) that Joomla displays when there are more articles available than can be shown on the home page as intro texts. In our example, the pagination links allow the visitor to navigate to a "second home page", displaying the intro texts of the two hyperlinks in the More articles ... list. Showing pagination links on a home page seems suited for weblog home pages, where visitors expect to be able to browse through possibly long lists of blog entries. On most other types of sites, web users aren't likely to expect multi-page home pages.

The options for the Home link (or any other Featured Articles Menu Item Type) allow you to also control exactly what details are shown for every article on the home page. Through the menu link settings you determine whether or not you want to show the author name, publication date, the category name, and much more. These article display settings in the menu link overrule the general settings found through Content | Article Manager | Options. For a full overview of all options available for the Featured Articles Menu Item Type.

Adding items to the home page

In the More Articles … hyperlink list at the bottom of your home page, two hyperlinks are shown. That's because only four articles are set to display on the home page. To add a couple of articles, navigate to Content | Article Manager. Add any article by clicking on the white star in the Status column to the left-hand side of the article title. The grey star changes to an orange star.

In the following example, we've selected a News item (CORBA Magazine Looking for Authors) to be Featured on the homepage:

Want to see what this looks like up front? Just click on View Site. The new home page item is shown at the top. All other featured items are now positioned one position lower than before. You'll notice that the Hideous Still Lifes intro text has disappeared as this featured item has now slid down one position, to the list with article hyperlinks. This list now contains three articles instead of two.

Another way to add articles to the home page

Adding items to the home page takes just a few clicks in the Article Manager Status column. You can also add an individual article to the home page through a setting in the Edit Article screen: under Details, select Featured: Yes.

Controlling the order of home page items manually

Now that you've reorganized your home page layout, you'll probably want some control over the order of the home page items. To manually set the order, first edit the Home menu link. Click Advanced Options and under Layout Options, make sure Category Order is set to No order:

Click Save & Close and go to Content | Featured Articles and set the order as desired. First, set the value of the Sort Order By select box (by default it shows Title) to Ordering. Now you can change the articles order by clicking the three vertical squares to the left-hand side of any article title and dragging the article to another position. The intro texts and links on the home page will now be displayed in the order they have in the Featured Articles screen:

What's the use of the Featured Articles screen?

In the Featured Articles screen, you can't—as you might have expected—assign items to the Featured status. As you've seen, you can assign articles to the Featured status in the Article Manager (or in the article editing screen). You'll probably use the Featured Articles screen if you want to manually control the order of home page items, or if you want a quick overview of all featured articles. Apart from this, the Featured Articles screen allows you to publish, delete, or archive featured articles—but you can just as easily use the Article Manager for that too.

Setting a criteria to automatically order home page items

Having full manual control over the order of home page items can be convenient when you have a fixed set of content items that you want to show up on the home page, for example, when you have a corporate site and want to always show your company profile, an introduction to your products, and a link to a page with your address and contact details.

However, when your site is frequently updated with new content, you'll probably want Joomla to automatically arrange the home page items to a certain ordering criteria. Again, you can customize this behavior by editing the Home link in the main menu. Its Layout Options allow you to choose from a wide range of ordering methods.

Time for action – show the most recent items first

The visitors of the CORBA site will probably expect to see the most recently added items on the top of the page. Let's set the Layout Options to organize things accordingly.

  1. Navigate to Menus | Main Menu and click the Home link to edit its settings.

  2. Under the Advanced Options tab, you'll find the Layout Options offering several ordering options for featured articles. Make sure Category Order is set to No order, to avoid that specific category order settings overruling the article settings you choose. In the Article Order drop-down list, choose Most recent first.

  3. As the Date for ordering, select Create Date. When ordering your articles by date, you'll probably want to display the creation date for every article. Navigate to the Article Options panel of the menu link and make sure Show Create Date is set to Show.

  4. Click on Save and click on View Site. Now the most recent items are shown first on the home page:

What just happened?

You've told Joomla to put the most recently added items first on the home page. If you want, you can check this by opening a featured article, changing its created date to Today, and saving your changes; this article will immediately be displayed at the top in the home page layout. If you prefer to order home page items in another way (for example, alphabetically by title), you can do this by selecting the appropriate Article Order settings of the home page menu item (the Home link in the Main Menu).

The Featured Articles Menu Item Type – an overview of all options

You've seen that the Home menu is a link of the Featured Articles Menu Item Type. When adding or editing a Featured Articles menu link, you'll see there are are six expandable options panels available under the Advanced Options tab, offering a huge number of customization settings. Below you'll find a complete reference of all available options.

Dozens of dazzling options – isn't that a bit too much?

You've seen them before and now they turn up again, those seemingly endless lists of options. Maybe you find this abundance discouraging. Is it really necessary to check thirty or forty options to create just one menu link? Luckily, that's not how it works. You get fine results when you stick to the default settings. But if you want to tweak the way pages are displayed, it is worthwhile to experiment with the different options. See which settings fit your site best; in your day-to-day web building routine you'll probably stick to those.

Layout Options

Under Layout Options of the Featured Articles Menu Item Type, you find the main settings affecting the layout and arrangement of home page items.

Select Categories

 

By default, the home page displays Featured Articles from all article categories. You can, however, control exactly from which categories featured articles should be shown. For example, you might want to display only featured articles from the News category on the home page, and featured articles from another category on another Featured Articles page, introducing another category. You'll see an example of this in the section Creating more than one page containing featured articles later in this article.

# Leading Articles

 

Enter the number of leading articles you want to display, that is, intro texts displayed across the entire width of the mainbody.

# Intro Articles

The number of article intro texts that you want to show in two or more columns.

# Columns

 

Specify the number of columns; over how many columns should the # Intro Articles be distributed?

# Links

 

The number of hyperlinks to other articles (shown below Leading or Intro Articles)

Multi Column Order

 

Should intro texts in multiple columns be sorted from left to right (across) or from top to bottom (down)?

Category Order

 

Do you want to organize the items on the page by category title? You might want to do this when you have many items on your home page and you want your visitor to understand the category structure behind this. If you want to order by category, set Show Category (see Article Options explained in the next table) to show; that way, the visitor can see that the articles are grouped by category.

The following Category Order options are available:

  • No Order: If you select this option, the items are displayed in the order you set in the Article Order field (the next option under Layout Options).
  • Title Alphabetical: Organizes categories alphabetically by title.
  • Title Reverse Alphabetical: Organizes categories reverse-alphabetically by title.
  • Category Manager Order: Organizes categories according to the order in the Category Manager and orders the category contents according to the Article Order (which you can specify below).

Article Order

 

You can order the items within the featured articles page by date, alphabetically by Author name or Title, Most hits, and so on. If you choose Featured Articles Order, then the items appear in the order they have on the Content | Featured Articles screen. This last option gives you full manual control over the order of items on the page. Note: the Article Order is applied only after the Category Order. Article Order only has effect if you choose No Order in the Category Order box.

Date for Ordering

 

If you've set the Article Order to Most Recent First or Oldest First, select the date for ordering: Created, Modified, or Published.

Pagination

 

Auto: When there are more items available than it can fit the first page, Joomla automatically adds pagination links (<<Start <Previous 1 2 3 Next> End>>). On the home page, in many cases, you'll probably want to set Pagination to Hide.

Pagination Results

 

If pagination links are shown, Joomla can also display the Pagination Results, the total number of pages (as in Page 1 of 3).

Article Options

The Article Options influence how articles are displayed on the Featured Articles page. For many extras you can select Show, Hide, Use Global (which means: use the settings chosen under Article Manager | Options), or Use Article Settings (use the settings chosen in the option panels of the individual articles).

The Article Options are similar to the options you can set in the general preferences for articles (Article Manager | Options. Here, you can depart from the general settings for the articles and make different choices for this particular menu item.

Show Title

Display article titles or not? It's hard to find a reason to select Hide.

Linked Titles

Should the title of the article be a hyperlink to the full article? By default this option is set to Yes. This is better for usability reasons, because your visitor can just click on the article title to read a full article (instead of just on a Read more link). It is also better because search engines love links that clearly define the destination (which article titles should do).

Show Intro Text

After the visitor has clicked on a Read more link, do you want them to see a page with just the rest of the article text (select No) or the full article including the intro text (select Yes)?

Position of Article Info

The Article Info consists of the article details, such as the publication date, author name, and so on. If these details are set to be displayed, do you want to display them above the article, below the article, or split (partly above the article and partly below it)?

Show Category

Select Show if you want to show the category name below the article title. Joomla will display the category (as shown in the following screenshot: Category: Club Meetings).

Link Category

If the Category title is shown, should it be a hyperlink to the category? In most cases it's a good idea to select Yes here: this provides visitors with a link to category contents with every article.

Show Parent

Select Show if you want to show the name of the main category (the parent category of the current article category) below the article title. This will look as follows:

Link Parent

Just like the Category title, the title of the parent category can be made a link to an overview page of the main category contents.

Show Author, Link Author, Show Create Date, Show Modify Date, Show Publish Date

Do you want to show the author name (and make it a link to a page with other articles by the same author), the creation date, the date the article was last updated, and/or the date on which the article was first published? By default, many of these options are set to Show. You may want to choose Hide if you've got a small site or a site that isn't regularly updated. In that case you probably don't want to broadcast when your articles were written or who wrote them.

Show Navigation

Select Show if want to display navigation links between articles.

Show Voting

Should readers be able to rate articles (assign one to five stars to an article)?

Show "Read more"

Do you want a Read more link to appear below an article intro text? You'll probably want to leave this set to Yes, but if the title of the article is a hyperlink, a Read more link can be omitted. Although Joomla displays the Read more link by default, many web builders just make the article title clickable and omit a separate Read more link.

Show Title with Read More

It's a good idea to display the article title as part of the Read more text, as this will make the link text more meaningful for both search engines and ordinary visitors.

Show Icons

Joomla can show a set of special function icons with any article. These allow the visitor to print the article, or to e-mail it. Do you want to display these options as icons or text links?

Show Print Icon, Show Email Icon

Show or hide the special function icons? It's often better to altogether hide these extras. Your visitors may want to use the print function, but any modern browser offers a print function with better page formatting options.

Show Hits

Should the number of hits per article (the number of times it's been displayed) be shown?

Show Unauthorized Links

Do you want to show hyperlinks to articles that are only accessible to registered users, or hide these articles completely?

The Article Options listed previously allow you to show or hide all kinds of details, such as Author, Create Date, and Modify Date. In the following image, you can see the result when most options are set to Show. Obviously, this results in too much "detail clutter".

On a website that's maintained by just one or a few authors, or a website that isn't updated regularly, you might want to hide author and date details. On a home page you'll probably also want to hide all of the special function icons (set Icons, Print Icon, and Email Icon to Hide). It's unlikely that visitors want to print or e-mail parts of your home page content. In the following image, all extras are hidden, which leaves much more room for actual content in the same space.

Integration Options

The Integration Options are only relevant when you use news feeds (RSS feeds) on your website.

Show Feed Link

The Show Feed Link option allows you to show or hide an RSS Feed Link. This will display a feed icon in the address bar of the web browser.

For each feed item show

This option allows you to control what to show in the news

feed; the intro text of each article, or the full article.

Link Type Options

The Link Type Options allow you to set the display of the menu link to this page (in this case the Home link).

Link Title Attribute

Here you can add a description that is displayed when the mouse cursor hovers over the menu link to this page.

Link CSS Style

Only relevant if you are familiar with CSS and want to apply a custom CSS style to this specific menu link. If you've added a specific style in the CSS stylesheet, in this box you should fill in the name of that special style. Joomla will adjust the HTML and add the CSS style to the current menu Home link, as follows:

<a class="specialstyle" ref="/index.php">
Home </a>

Link Image

Should an image be shown in the Main Menu link next to the Home link? Menu images (icons) can make a menu more attractive and easier to scan. Following is one of countless examples from the web:

Add Menu Title

When you use a Link Image, should the menu link text be displayed next to it? Select No only if you want a completely graphical menu, using just icons.

Page Display Options

Under Page Display Options, you'll find some options to customize page headings and an option to control the general design of the page.

Browser Page Title

An HTML page contains a title tag. This doesn't appear on the page itself, but it's is displayed in the title bar of the browser. By default, Joomla will use the menu item title as the title tag. Here, you can overrule this default title.

Show Page Heading

Here you can determine if a page heading appears at the top of the page (that is, in the mainbody). By default, this option is set to No. Select Yes to show the Menu Item Title as the Page Heading.

Page Heading

If you want to customize the Page Heading (instead of using the default Menu Item Title as the heading text), enter a text here.

Page Class

This is only relevant if you want to get more control over the page design: font size, colors, and so on. Using the Page Class field, you add a suffix to the name of all CSS styles used on this page. To use this feature, you have to know your way around in CSS.

Metadata Options

The Metadata Options allow you to add description and keywords to describe the web page's content.

Meta Description, Meta Keywords, Robots, Secure

Metadata information is used by search engines. You can add an article description, meta keywords, and enter instructions for Robots (web search engine spiders) and select whether this link should use a specified security protocol.

Module Assignment for this Menu Item tab

Click the Module Assignment for this Menu Item tab to see links to all modules that are assigned to the current menu item. Modules in Joomla are always assigned to one or more menu items. When the visitor clicks a menu link, a page is displayed consisting of (among other things) specific module blocks. This overview of (links to) assigned modules makes it easier for administrators to jump directly from the menu item to all related modules and change their settings.

Creating more than one page containing featured articles

By default, the Featured Articles Menu Item Type is used only once on your site. All articles that have the Featured status, are shown on the homepage. This is because the Home link in the Main Menu is created using the Featured Articles Menu Item Type.

However, you can create as many Featured Articles pages as you like, each one showing featured articles from different categories. Let's say you want to create a page called "News Highlights", containing featured articles only from the News category. To do this, create a new menu link of the Featured Articles Menu Item Type and instead of All Categories select only the News category:

The output would be a separate featured articles page containing news highlights. To avoid the same featured news showing up on both the homepage and the News Highlights page, you would probably want to change the home page settings (currently set to show all categories) and get it to display featured articles from all categories except for the News category.

Another type of home page: using a single article

So far you've used Joomla's Featured Articles layout for your site's home page. But what if you want a completely different home page layout? That's easily achieved, since Joomla allows you to set any menu item as the default page.

Time for action – creating a different home page

Let's not use the Featured Articles and create a simple home page that only shows one single, full article:

  1. Navigate to Menus | Main Menu. As you can see, there's a star in the Home column of the Home link. This indicates that this is the default page; the visitor will see this page in the mainbody when accessing your site.

  2. In this example we'll select the Mission Statement menu item as the new home page. Locate this article in the list and click on the grey star in the Home column.

  3. Clicking the grey star will turn its color into orange, indicating this is now the default page. Click on View Site. The results are shown in the following screenshot. An ordinary article is now the home page:

    If you want to update the Main Menu to reflect these changes, you can hide the existing Home link in the Article Manager, which is still pointing to the "old" homepage. To do this, in the Menu Manager you would click on the Unpublish item icon next to the Home link and rename the existing Mission Statement menu link to Home.

What just happened?

You've changed the default view of the home page to a fresh look, showing one article. Of course, you can dress up such a basic home page any way you like. For some sites (a simple "brochure site" presenting a small company or a project), this may be a good solution.

The consequence of this approach is, of course, that the Featured status (that you can set in the Article Manager and in the article edit screen) no longer determines what's published on the home page.

Joomla! 3 Beginner’s Guide A clear, hands-on guide to creating perfect content managed websites with the free Joomla! CMS with this book and ebook
Published: March 2013
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

Have a go hero – undo!

For our example site, a single article home page doesn't fit the bill. You can easily revert to the home page you created earlier. In the Main Menu, set the Home link to be the Default item again and click on the cross in the Status column to unhide the Home link in the menu. Everything is back to normal now.

Creating category overview pages

In the previous chapter, you've seen how you organize content with categories and subcategories. By creating categories, you tell Joomla how to group things. However, you will also want to present category contents on the website in one way or another. That's where Joomla's category overview pages come in. They provide an intermediate level between the home page and content pages, presenting hyperlinks to category contents. They're a bit like second-level home pages. Joomla has no name for these pages; we'll call them overview pages or just category pages.

You've already seen some basic examples of Joomla's overview page when you created menu links of the Category Blog Menu Item Type to display categories.Now, we'll go beyond the basics and make category pages that exactly fit your (client's) needs.

Two main choices: Blog Layout and List Layout

Of course, being a somewhat advanced Joomler, you already know that you can create category overview pages through specific menu link settings. Creating a link to a category takes just the following steps:

  1. Navigate to Menus | Main Menu | Add New Menu Item.

  2. In the Menu Item Type section, click on Select. In the pop-up screen, click Articles. To display categories, you have two main options:

    • Category Blog

    • Category List

  3. Select the appropriate layout, select the category the menu link should point to, and add a link—that's all there is to it.

There's a small catch to step 3. How do you choose between a Blog layout and a List layout? How do you create the type of overview page that fits the content of a specific category? That's what we'll find out now. Let's first have a look at the Blog layout; it's more common and more flexible than the List layout.

Among the available Menu Item Types, you'll notice there's another one that has to do with categories: List All Categories. This has a specific use—as you may have guessed, it generates a page that lists hyperlinks to all article categories on the site. You can use this to generate a simple site map.

The first type of overview page: creating Category Blog layouts

The Category Blog layout is quite flexible and offers you very different ways of presenting your content. Time to start experimenting!

Time for action – create a facebook using the Blog layout

Let's use the Blog layout to create a small facebook, a collection of pages presenting the CORBA team.

  1. For this purpose, create a new category (via Content | Category Manager | Add New Category) named Who are CORBA?. Under Details, select About CORBA as its parent category and click Save & Close.

  2. Navigate to Content | Article Manager and create three new articles in the Who are CORBA? category in the About CORBA main category. In this example, we've used these titles: Ms. Daiping Suraba, Dr. T. Phaedratski, and Dr. A. Fienstein. Create articles with an intro text, a Read more link, and a main article text

  3. Now let's create a category page. Make a new menu link by navigating to Menus | Main Menu | Add New Menu Item. In the Menu Item Type field, select Articles | Category Blog.

  4. Click on Save and click on View Site. So far so good! There's a new link, showing a new category page:

  5. The page looks OK, but there's room for improvement. We don't want to display the first founding member in one wide column and the others in two narrow columns. Let's divide the article intros evenly over the page. Change the Blog Layout Options of the Who are CORBA? menu link as follows:

    • # Leading Articles: 0

    • # Intro Articles: 3

    • # Columns: 3

    • # Links: 0

  6. Click on Save and click on View Site. The following screenshot shows the new outcome:

  7. Looks alright, but the three-column layout doesn't fit with the overall site design.

  8. Let's try one final alternative. Set # Leading Articles to 3, # Intro Articles to 0, # Columns to 0, and # Links to 0. Click on Save and click on View Site. Voila! A simple and clean one-column layout:

The resulting page looks balanced, so let's keep it this way.

What just happened?

You've tried out different ways in which category pages can show article content. You've added a facebook to the Who are CORBA? category by displaying the intro texts of the articles in a category overview page, and you've seen how the magical Blog Layout numbers determine what the page looks like.

Have a go hero – add a category description

Category content doesn't always speak for itself, so you may want to give your visitors a short introduction to a category page. We've already mentioned the possibility of entering category descriptions in Chapter 5, Small Sites, Big Sites:Organizing your Content Effectively. They allow you to show a few descriptive lines at the top of any category page. Why not add one to the Who are CORBA? category page?

  1. Navigate to Menus | Main Menu and open the Who are CORBA? menu link to edit it. In the Edit Menu Item screen, click the Advanced Options tab and navigate to the Category Options panel. Make sure Category Description is set to Show. You may also want to set the Category Title to Show: this way the page will have a heading that reflects the menu link title. Save and close the menu link screen.

  2. As yet there's no category description to display, so let's add a few lines. Navigate to Content | Category Manager and click on the Who are CORBA? category title to edit the category properties. In the Description field, add a little intro text:

  3. Click on Save and click on View Site. On the Who are CORBA? page, the category title and category description are displayed:

Showing full articles on a category overview page

So far, you've seen how you can show intro texts and links to articles on a category page. However, you can also use category pages to show a list of full articles. In fact, this is probably why this layout is called a Category Blog. A typical page on a weblog consists of a number of short articles ordered by subject or by date.

Here's an example of how you can get a category page to show three full article texts:

To achieve this in Joomla, you use a Category Blog page like the one you created just before. To show full articles instead of intro texts, change the article texts themselves. Up to now, they contain a Read more division telling Joomla to display no more than the intro text on overview pages. Navigate to Content | Article Manager and select the article you want to edit. In the editor screen, select the red dotted line indicating the separation between intro text (with a Read more … link) and the rest of the text. Now delete this red line. This will tell Joomla not to split the article. On any overview page it will now show the full article instead of just its intro text.

When you create a page like this, you probably don't want to display the Category: Who are CORBA? information with every article. There's no use for this, as there are no additional articles in this category; all articles are already displayed on this one page. Again, you tweak these details through the settings of the menu link pointing to the page. In this case, to hide the link to the category name, edit the menu link settings of the Who are CORBA? link: under Article Options, set Show Category to Hide.

Have a go hero – experiment with Category Blog layout settings

Just like the Featured Articles layout, the Category Blog layout offers a huge array of settings that allow you to adjust the target page. You set them through Menus | Main Menu | [name of link to category page]. Here you'll find a number of option panels that you'll be familiar with; after all, you've already tried out the Featured Articles settings earlier in this chapter and the available options are very similar. The following table is a short overview of the options, particularly of those specific for the Category Blog layout.

Setting the options of the Category Blog Menu Item Type

Most of the settings of the Category Blog Menu Item Type are identical to those available for the Featured Articles layout. This holds for the Article Options, Integration Options, Link Type Options, Page Display Options, and Metadata Options.

There's just one slightly differently named heading: what's called Blog Layout Options here is similar to what's called Layout Options in the Featured Articles settings screen.

Category Options

The only settings specific for the Category Layout are found in the Details panel (where you select the category you want to display) and in the Category Options panel (under the Advanced Options tab). In the following listing you'll find an explanation of the options available in the Category Options panel.

Category Title

Show the category title as a heading on the category page?

Category Description

Shows the category description as an introductory text on the category page?

Category Image

If the category has an image added to it (under the Basic Options of the category edit screen), should this be displayed on the page?

Subcategory Levels

If the selected category has subcategories, enter the maximum number of subcategory levels that should be displayed on the page.

Empty Categories

Should empty categories be hidden or not? It's best to hide these categories, as there's little need for visitors to explore categories that have no content.

No Articles Message

When Empty Categories is set to Show, a message can be displayed telling the visitor there are no articles.

Subcategories Descriptions

Should the descriptions of subcategories be displayed?

# Articles in Category

Should the number of articles in the category be displayed?

Page Subheading

When you set Category Title not to show, you can enter another text here that will be displayed as the page heading. If you were to enter the text Meet the CORBA team! here, this would result in the following output:

The second type of overview page – Lists

Compared to the Category Blog layout, the Category List layout provides a more basic view of category contents. Instead of a series of intros and links, the visitor is shown only a number of links to categories and/or articles.

How do you make a such a list page? The steps are basically the same as the ones involved in creating Category Blog menu links. Navigate to Menus | Main Menu | Add New Menu Item and select Category List as Menu Item Type. Provide the necessary details (select a target category and type a link title) and you're done. In this section we'll find out in more detail how this works and how you can customize the default List layout.

Time for action – add a link to a Category List layout

Let's find out what the differences are between a Category Blog and a Category List. Earlier, you've created a Category Blog link pointing to the News category. Let's now create a list overview of the same category.

  1. Navigate to Menus | Main Menu | Add New Menu Item.

  2. In the Details screen, click on the Select button next to the Menu Item Type option. In the Select a Menu Item Type pop-up screen, click on Category List:

  3. In the Select a category drop-down box, select News. In the Menu Title field, add a descriptive menu link text: News Articles Overview.

  4. Click on Save. Done! Click on View Site to see the home page of your site; click on the News Articles Overview link to see the new list page. It should look similar to the following screenshot:

What just happened?

You have created a category page that displays a list of hyperlinks to articles instead of a series of teaser texts. Clicking on an article title takes the visitor to the actual article page.

The Category List layout can be useful for categories that are crammed with articles. If the News category would contain hundreds of articles, this layout could provide a quick overview to all articles, allowing visitors to scan or search for article titles. You can also consider using List Layouts on a site with many articles on related subjects, such as elaborate FAQ sections or large numbers of articles in a site section featuring product reviews. Lists enable visitors to quickly find information they search for. It's not really suited to attract casual surfers to explore the site's content. For that purpose you'll probably want to use the Category Blog Layout.

Customizing lists: Exploring Category List options

You can customize the look of Category List pages just like you change Category Blog pages: by changing the settings available in the menu link screen. Navigate to Menus | Main Menu | [name of menu link to the category]. In the Details tab, you'll enter required settings, such as the Menu Title (the link name) and the category you want to display. Click on the Advanced Options tab to see the other available options. Here's an overview.

Category Options

These are identical to the Category Options of the Category Blog Layout. To find out what options are available, have a look at the previous section on Category Blog layouts (see the section Have a go hero – experiment with Category Blog layout settings).

List Layouts

This panel contains the settings that are relevant to this specific Menu Item Type. They allow you to customize the list display.

Display Select

Select Show to display a select box allowing the visitor to choose how many items they want to see on the page. This option is turned off by default, because it's only useful if the list contains at least a few dozen hyperlinks.

Filter Field

The Filter Field is in fact a search box that appears at the top of an article list, allowing the visitor to quickly find content that matches the search criteria entered. The Filter Field setting allows you to specify that the search filter works by title, author name, or number of hits. You can also set the Filter Field to Hide.

Table Headings

Here you can select if you want to show or hide column headers (Article Title, Author, and so on) above the article listing. The output will look as follows:

The preceding screenshot shows the table view using the Beez3 template that comes with Joomla 3. At the time of writing, the Protostar template didn't (yet) support displaying table headings. An advantage of showing table headings is that the visitors can sort the table list (as this is done by clicking the column heading).

Show Date

Do you want to show or hide the Date column (showing publication dates)? You can choose to show the Create Date, Modify Date, or Publish Date.

Date Format

By default, Joomla displays the date as in the following example: Wednesday, 19 August, 2011. If you want to format the date differently, enter a date format code here. For example, entering the code %Y-%m-%d will change the article date format to 2011- 09-19. To find out which codes are allowed, check http:// php.net/manual/en/function.strftime.php.

Show Hits in List, Show Author in List

These options allow you to hide the author name column and the column with the number of hits. By hiding both, you can display a basic hyperlink list that consist of only article titles:

Category Order

If the menu link points to a category and its subcategories (as set in the Category Options of this menu link), in what order should these multiple categories be displayed? You can order them alphabetically by title, reversed alphabetically, or in the default order that the categories have in the Category Manager.

Article Order

The order of the list of articles. This Article Order doesn't have an effect on the category list page itself (which contains no articles), but on the next page.

Date for Ordering

If articles are ordered by date, select what date you want to order them by? The options are: Create Date, Modify Date, or Publish Date.

Pagination

Auto: When there are more items available than it can fit on the first page, Joomla automatically adds pagination links (<<Start <Previous 1 2 3 Next> End>>).

Pagination Results

If pagination links are shown, Joomla can also display the Pagination Results: the total number of pages (as in Page 1 of 3).

Summary

In this article, we learned how to customize the home page settings, create a different kind of home page, and create and tweak category overview pages. We also learned applying different layouts for different types of overview pages. Now zoom off and apply all these tips and tricks to your own page and amaze your friends!

Resources for Article :


Further resources on this subject:


Joomla! 3 Beginner’s Guide A clear, hands-on guide to creating perfect content managed websites with the free Joomla! CMS with this book and ebook
Published: March 2013
eBook Price: $29.99
Book Price: $49.99
See more
Select your format and quantity:

About the Author :


Eric Tiggeler

Eric Tiggeler is the author of the Joomla! 3 Beginner's Guide and has written several Dutch guides on Joomla! and other content management systems, all of which got excellent reviews. Eric writes tutorials for several computer magazines and Joomla! community websites. Over the last ten years, Eric has developed numerous websites, big and small, many of them using Joomla!

Eric is fascinated by the Web as a powerful and creative means of communication, and by revolutionary software such as Joomla!, which enables anyone to create beautiful and user-friendly websites. His passion is making complex things easy to understand.

Books From Packt


Joomla! 1.5 SEO
Joomla! 1.5 SEO

Joomla! 1.5: Beginner's Guide
Joomla! 1.5: Beginner's Guide

Mastering Joomla! 1.5 Extension and Framework Development Second Edition
Mastering Joomla! 1.5 Extension and Framework Development Second Edition

Joomla! 1.5 JavaScript jQuery
Joomla! 1.5 JavaScript jQuery

Joomla! 1.5 Template Design
Joomla! 1.5 Template Design

Joomla! Search Engine Optimization
Joomla! Search Engine Optimization

Joomla! 2.5 Beginner’s Guide
Joomla! 2.5 Beginner’s Guide

Joomla! E-Commerce with VirtueMart
Joomla! E-Commerce with VirtueMart


No votes yet

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
x
Z
u
g
R
M
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software