---
title: Developing the News page (ASPX)
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

Create the News section of the website.

## Preparing the ASPX source file

1. Edit your web project in Visual Studio.
2. Right-click the **CMSTemplates/MySite** folder in the Solution Explorer and click **Add -> Add New Item**.
3. Create a **Web Form** named _**NewsPage.aspx**_ and check **Select master page**.
4. Click **Add** and choose the _**MyMaster.master**_ page from the **CMSTemplates/MySite** folder.
5. Drag the following controls inside the **** element of the news page:

   - CMSBreadCrumbs
   - CMSRepeater
6. Set the properties of the **CMSRepeater** control according to the table below (you can find them in the **Behavior** section of the Visual Studio **Properties** window):

   | Property                       | Value            | Description                                                                                                                           |
   | ------------------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------- |
   | ClassNames                     | cms.news         | Configures the repeater to display only pages of the cms.news type.                                                                   |
   | TransformationName             | cms.news.preview | Assigns the transformation that the repeater uses to display the list of news items.                                                  |
   | SelectedItemTransformationName | cms.news.default | When a user selects a specific news item on the website, the repeater displays the details according to the specified transformation. |
   | ItemSeparator                  |                  | Defines the HTML code placed between individual news items in the list.                                                               |

   ```html

   <cms:CMSRepeater ID="CMSRepeater1" runat="server" ClassNames="cms.news" TransformationName="cms.news.preview" SelectedItemTransformationName="cms.news.default" ItemSeparator="<hr />" />

   ```
7. Add the following HTML code between the two controls:

   ```html

   <h1>News</h1>

   ```
8. Switch to the code behind of the news page (**NewsPage.aspx.cs**) and add a reference to the **CMS.UIControls** namespace:

   ```csharp

   using CMS.UIControls;

   ```
9. Change the class definition so that it inherits from the **TemplatePage** class:

   ```csharp

   public partial class CMSTemplates_MySite_NewsPage : TemplatePage

   ```
10. Save the news page files.

## Registering the page template

The source files of the news page are ready. Now you need to register the page template in Kentico.

1. Switch to the Kentico administration interface in your browser.
2. Open the **Page templates** application.
3. Select the **My website** category.
4. Click **New template** and type _**My news template**_ into the **Template display name** field.
5. Click **Save**.
6. Set the following values on the **General** tab:
   - **Template type**: ASPX page
   - **File name**: \~/CMSTemplates/MySite/NewsPage.aspx
7. Click **Save**.
8. Switch to the **Sites** tab and assign the page template to **My website**.

## Adding the news section

1. Open the **Pages** application.
2. Select the root of the content tree (**My website**).
3. Click **New** ().
4. Choose the **Page (menu item)** page type.
5. Type in _**News**_ as the **Page name** and choose the **Use existing page template** option. Select the **My website** category and the **My news template** page template.

   ![](https://docs.kentico.com/docsassets/k81tutorial/developing-the-news-page-aspx/ASPX_News_Template_Select.png)
6. Click **Save** to create the page.
7. Select the **News** page in the content tree
8. Click **New** () and choose the **News** page type.
9. Fill in the news page fields with the following values:
   - **News Title**: News 1
   - **Release Date**: click **Today**
   - **News Summary**: News 1 summary.
   - **News Text**: News 1 text.
   - **Publish from/Publish to**: leave the fields blank
10. Click **Save and create another** and enter the following values:
    - **News Title**: News 2
    - **Release Date**: click **Today**
    - **News Summary**: News 2 summary.
    - **News Text**: News 2 text.
    - **Publish from/Publish to**: leave the fields blank
11. Click **Save**.

If you select the /News page and switch to **Preview** mode, you can see a list of all news pages placed under the **News** section.

![Previewing the list of news articles](https://docs.kentico.com/docsassets/k81tutorial/developing-the-news-page-aspx/ASPX_News_Preview.png "Previewing the list of news articles")

This is an example of how content is structured in Kentico. If you select a specific news item, the page displays the detail view.

The breadcrumbs at the top of the page show the current path on the website: **News > News 1**. The position is also reflected in the default page URLs:

- The URL of the News page is **\~/news.aspx**
- The URL of the News 1 page is **\~/news/news-1.aspx**

This makes the website accessible to both people and search engines.

## How it works

1. A visitor arrives on the **/News** page.
2. The **CMSRepeater** control placed on the page template checks if a news page is currently selected (based on the value of the **ClassNames** property).
3. The control finds out that the current page is a page (menu item), so it looks for all underlying news pages and displays them as a list using the **cms.news.preview transformation**.
4. When the visitor selects a particular news item, such as **/News/News 1**, the repeater control uses the **cms.news.default** transformation instead to display the details.

## Path expressions

Listing web parts and controls have the **Path** property that specifies which content the component loads and displays. The following expressions are examples that you can use to select pages:

| Path expression | Meaning                                                                                                                                                                                             |
| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| /%              | All pages on the website.                                                                                                                                                                           |
| /news/%         | All pages under /News.                                                                                                                                                                              |
| /news/news1     | The News1 page.                                                                                                                                                                                     |
| ./%             | All items under the current page.                                                                                                                                                                   |
| ./logo          | The Logo page under the current page.                                                                                                                                                               |
| ./images/%      | All pages under the Images page, which is a child of the current page.                                                                                                                              |
| ../contacts/%   | All pages under the Contacts page on the same content level as the current page.                                                                                                                    |
| /{0}/%          | All pages under the page located on the first level of the current path.<br>Example:<br>If the currently selected page is:<br>_/news/news1_<br>the system evaluates the expression as:<br>_/news/%_ |
