# 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:** 11
**Page:** 1
### Author:  [@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")
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()}`;
}
{{#if this.isHomepage}}
This is my homepage HTML content
{{/if}}
}
```
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 `...` 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";
```
☝ and that’s all, it just needs a single line calling for your component 🎉
* * *
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).
---
### Author:  [@Cornelius](https://meta.discourse.org/u/Cornelius)
#### Post date: [5 juni 2023 om 18:44 UTC](https://meta.discourse.org/t/add-custom-content-that-only-appears-on-your-homepage/131415/14 "2023-06-05T18:44:47Z")
Hi @awesomerobot,
Thanks for the explanation. I tried the steps you suggested but the after\_header I implemented is still showing in the post detail pages. Can you recommend how I can fix this to show only on my home page?
---
### Author:  [@carson](https://meta.discourse.org/u/carson)
#### Post date: [5 juni 2023 om 20:13 UTC](https://meta.discourse.org/t/add-custom-content-that-only-appears-on-your-homepage/131415/15 "2023-06-05T20:13:08Z")
Hi @Cornelius, is it alright to view your code?
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [6 juni 2023 om 23:40 UTC](https://meta.discourse.org/t/add-custom-content-that-only-appears-on-your-homepage/131415/16 "2023-06-06T23:40:20Z")
It would be great to rewrite this for modern use of the filesystem rather than sticking everything in the header tags.
Most of these old guides for themes are out of date with your things are done now.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [13 juni 2023 om 17:12 UTC](https://meta.discourse.org/t/add-custom-content-that-only-appears-on-your-homepage/131415/17 "2023-06-13T17:12:13Z")
Yes, this was fairly outdated! I’ve updated it to reflect the structure of remote themes and our modern Ember components.
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [14 juni 2023 om 16:54 UTC](https://meta.discourse.org/t/add-custom-content-that-only-appears-on-your-homepage/131415/18 "2023-06-14T16:54:08Z")
> [@awesomerobot](#):
>
> I’ve updated it to reflect the structure of remote themes and our modern Ember components.
That’s awesome!
> [@awesomerobot](#):
>
> 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`
And that `getter` is the same thing as this [http://ember-cli-page-object.js.org/docs/v1.11.x/api/getter.html](http://ember-cli-page-object.js.org/docs/v1.11.x/api/getter.html)? I know just enough to be dangerous. If it is the same, then I’ll edit the OP to link to it.
---
### Author:  [@Prayas\_Arora](https://meta.discourse.org/u/Prayas_Arora)
#### Post date: [21 juni 2023 om 08:49 UTC](https://meta.discourse.org/t/add-custom-content-that-only-appears-on-your-homepage/131415/19 "2023-06-21T08:49:21Z")
@awesomerobot Hi kris, I have installed discourse locally on my system. What is the right path to add these files in my local instance of discourse. I wanted to add a new theme-component in my local instance of discourse.
---
### Author:  [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [21 juni 2023 om 09:48 UTC](https://meta.discourse.org/t/add-custom-content-that-only-appears-on-your-homepage/131415/20 "2023-06-21T09:48:27Z")
You would create your theme component and install it through the ux.
[Install a theme or theme component](https://meta.discourse.org/t/install-a-theme-or-theme-component/63682)
[Install the Discourse Theme CLI console app to help you build themes](https://meta.discourse.org/t/install-the-discourse-theme-cli-console-app-to-help-you-build-themes/82950)
---
### Author:  [@carson](https://meta.discourse.org/u/carson)
#### Post date: [28 februari 2024 om 22:50 UTC](https://meta.discourse.org/t/add-custom-content-that-only-appears-on-your-homepage/131415/21 "2024-02-28T22:50:23Z")
If I build my homepage on top of the category view, I am consequentially still getting my custom content even if I go to `/categories` which is not the home URL. I want to limit this to just the root URL `/` which I believe is what the previous code was doing, but I wonder if `defaultHomepage()` should do that.
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [28 februari 2024 om 23:40 UTC](https://meta.discourse.org/t/add-custom-content-that-only-appears-on-your-homepage/131415/22 "2024-02-28T23:40:00Z")
`discovery.${defaultHomepage()}` will match the route that is set as the landing route by the `top-menu` setting. It will match both the root URL `/` AND the specific route, like `/categories`.
In my experience there’s two complications when building a custom homepage based on `defaultHomepage()`:
- the route that it is build on is not available as a plain list view any longer
- members can set their own default homepage in their interface settings. So one either needs to disable that feature or actually have a homepage concept that works on any of the top-menu routes
To only build a custom homepage on the root URL one can check for `router.currentURL === '/'`. By default, this only matches the root URL `/` and not the landing route set by the top-menu setting. However, there is logic now on the sidebar links that additionally aims to match a given URL to a route. So it won’t work on sidebar links by default. I just posted a topic on this: [Can I have sidebar links that don’t resolve an url to a route?](https://meta.discourse.org/t/can-i-have-sidebar-links-that-dont-resolve-an-url-to-a-route/297067)
In my understanding there’s currently no default way to build a custom homepage on the root URL without either targeting a route from the top-menu as well or running into issues with the sidebar. It would be great to have that option.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [29 februari 2024 om 15:04 UTC](https://meta.discourse.org/t/add-custom-content-that-only-appears-on-your-homepage/131415/23 "2024-02-29T15:04:44Z")
> [@manuel](#):
>
> `discovery.${defaultHomepage()}` will match the route that is set as the landing route by the `top-menu` setting. It will match both the root URL `/` AND the specific route, like `/categories`.
Right, it’s kind of a long-standing hack that `/` and the corresponding `/route` can render different content. We have a todo to
1. Allow the homepage to be set independently of the `top_menu` setting
2. Add a new stand-alone homepage template that can be customized without taking over an existing route
Custom homepages are a very common request at this point, so we could certainly use more flexibility here.