# Add custom content that only appears on your homepage

**URL:** https://meta.discourse.org/t/add-custom-content-that-only-appears-on-your-homepage/131415
**Category:** Developer Guides
**Tags:** how-to
**Created:** [19 oktober 2019 om 02:19 UTC](https://meta.discourse.org/t/add-custom-content-that-only-appears-on-your-homepage/131415 "2019-10-19T02:19:07Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![Discourse](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/discourse/32/148734_2.png) [@Discourse](https://meta.discourse.org/u/Discourse)
#### Post date: [19 oktober 2019 om 02:19 UTC](https://meta.discourse.org/t/add-custom-content-that-only-appears-on-your-homepage/131415/1 "2019-10-19T02:19:07Z")

</div>

A very common situation you’ll find yourself in as a theme developer is the need to create content that only shows on the homepage of your community.

You might add some HTML to the “After Header” section of your theme, which will then appear on every page. You can jump through some hoops in CSS to hide this everywhere except the homepage… but instead let’s use a Discourse theme to create a component with content that is only visible on your homepage.

If you’re unfamiliar with Discourse themes check out [Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) and [Structure of themes and theme components](https://meta.discourse.org/t/structure-of-themes-and-theme-components/60848)

In your Discourse theme you’ll need to setup the following directory structure:

📁 `javascripts/discourse/components/`  
📁 `javascripts/discourse/connectors/`

From here we’re going to create an Ember component. You can find more about Ember components from their documentation: [Ember.js Guides - Guides and Tutorials - Ember Guides](https://guides.emberjs.com/release/)

But for now this will be a simple component, written as a single `.gjs` file containing both the logic and the template.

📄 `javascripts/discourse/components/custom-homepage-content.gjs`

```gjs
import Component from "@glimmer/component";
import { service } from "@ember/service";
import { defaultHomepage } from "discourse/lib/utilities";

export default class CustomHomepageContent extends Component {
  @service router;

  get isHomepage() {
    const { currentRouteName } = this.router;
    return currentRouteName === `discovery.${defaultHomepage()}`;
  }

  <template>
    {{#if this.isHomepage}}
      <h1>This is my homepage HTML content</h1>
    {{/if}}
  </template>
}

```

This creates a `isHomepage` getter, which checks the router service for the `currentRouteName` — if the route name matches your homepage (as dictated by site settings) then it will return `true`. The template inside `<template>...</template>` checks that getter and only displays your content when it’s `true`. You can add any HTML you want between the `{{#if}}` blocks.

Now that our component is created, we need to add it to Discourse somewhere. For this step you’ll need to decide which plugin outlet to utilize. These are areas throughout Discourse where we’ve added a little code for developers to hook into. You can [search Discourse for these on Github](https://github.com/search?q=repo%3Adiscourse%2Fdiscourse+%3CPluginOutlet&type=code), or browse for them using the [(deprecated) Plugin outlet locations theme component](https://meta.discourse.org/t/plugin-outlet-locations-theme-component/100673/1/).

For custom homepages, [above-main-container](https://github.com/discourse/discourse/blob/4cb3412a56574b3f5de7ca518c68805daddd39c5/app/assets/javascripts/discourse/app/templates/application.hbs#L48) is a common choice, so let’s use that.

We need to create our connector file in the correct directory:

📄 `javascripts/discourse/connectors/above-main-container/custom-homepage-connector.gjs`

```gjs
import CustomHomepageContent from "../../components/custom-homepage-content";

<template><CustomHomepageContent /></template>

```

☝ and that’s all, it just needs a single line calling for your component 🎉

 ![Screenshot 2023-06-13 at 1.06.13 PM](https://global.discourse-cdn.com/meta/original/4X/1/e/5/1e51ad4c6cd2a722e33d656765e7e04d59777aba.png)

* * *

This document is version controlled - suggest changes [on github](https://github.com/discourse/discourse/blob/main/docs/developer-guides/docs/05-themes-components/25-homepage-content.md).

---

_[View the full topic](https://meta.discourse.org/t/add-custom-content-that-only-appears-on-your-homepage/131415)._