### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [June 8, 2024, 9:41am UTC](https://meta.discourse.org/t/using-the-new-custom-homepage-feature/302496/28 "2024-06-08T09:41:51Z")
In the first post there’s a link to Github with comments explaining the feature. I believe this is still an experimental feature and to try it out you need to use and [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:  [@pinder99](https://meta.discourse.org/u/pinder99)
#### Post date: [June 8, 2024, 10:30am UTC](https://meta.discourse.org/t/using-the-new-custom-homepage-feature/302496/30 "2024-06-08T10:30:37Z")
thanks for reply manuel, i am already using the cli , git documents show how to add the custom html not actual component , i want to add the serach banner which is already installed on forum , can i call it in home.hbs or i have to create a new html search banner to use
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [June 8, 2024, 11:38am UTC](https://meta.discourse.org/t/using-the-new-custom-homepage-feature/302496/31 "2024-06-08T11:38:42Z")
> [@pinder99](#):
>
> i want to add the serach banner which is already installed on forum
How about showing it on the homepage then?
---
### Author:  [@pinder99](https://meta.discourse.org/u/pinder99)
#### Post date: [June 8, 2024, 11:55am UTC](https://meta.discourse.org/t/using-the-new-custom-homepage-feature/302496/32 "2024-06-08T11:55:19Z")
yes this is the issue , i need to add it on homepage , i have added one custom now i have 2 let me remove one from theme thanks agains , much appreciate
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [June 15, 2024, 11:31am UTC](https://meta.discourse.org/t/using-the-new-custom-homepage-feature/302496/37 "2024-06-15T11:31:03Z")
> [@pmusaraj](#):
>
> The [sample-list](https://github.com/pmusaraj/discourse-sample-custom-homepage/blob/main/javascripts/discourse/sample-custom-homepage/connectors/above-main-container/sample-list.gjs) component there should pull in only topics with the `featured` tag, but it doesn’t (it pulls in the first 3 topics for me).
As mentioned when there’s multiple iterations it works on the subsequent ones and only the first time the filter is not applied. So it would work when I add an initial dry run to the store:
>
I don’t know how to properly debug this, but maybe it helps to narrow down the issue.
---
### Author:  [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [June 15, 2024, 11:33am UTC](https://meta.discourse.org/t/using-the-new-custom-homepage-feature/302496/38 "2024-06-15T11:33:07Z")
Sounds like a cache that needs warming.
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [June 15, 2024, 11:35am UTC](https://meta.discourse.org/t/using-the-new-custom-homepage-feature/302496/39 "2024-06-15T11:35:15Z")
Yeah it has to do with how we preload data. I have a PR ready with a potential fix: [DEV: Extract theme resolution to a helper by pmusaraj · Pull Request #27426 · discourse/discourse · GitHub](https://github.com/discourse/discourse/issues/27426)
Will merge early next week.
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [June 20, 2024, 8:59pm UTC](https://meta.discourse.org/t/using-the-new-custom-homepage-feature/302496/40 "2024-06-20T20:59:07Z")
The PR above has now been merged @manuel, it should fix the issue for you. Thanks again for the report!
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [August 27, 2024, 6:39pm UTC](https://meta.discourse.org/t/using-the-new-custom-homepage-feature/302496/41 "2024-08-27T18:39:57Z")
I noticed today that adding a component into a route via the new recommended method does not work when using this theme modifier.
```javascript
import { apiInitializer } from "discourse/lib/api";
import welcomeBanner from "../components/welcome-banner";
export default apiInitializer("1.8.0", (api) => {
api.renderInOutlet("custom-homepage", welcomeBanner);
});
```
The only way it works is `javascripts/connectors/custom-homepage/welcome-banner.hbs`
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [August 27, 2024, 8:17pm UTC](https://meta.discourse.org/t/using-the-new-custom-homepage-feature/302496/42 "2024-08-27T20:17:47Z")
Seems to work for me.. Do you already render another component? I think there was the issue that it only works with one. Or it’s because I’m only using it on stable right now.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [August 27, 2024, 8:57pm UTC](https://meta.discourse.org/t/using-the-new-custom-homepage-feature/302496/43 "2024-08-27T20:57:00Z")
I’ll have to test out some more, I am not sure why this isn’t working for me atm.
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [March 24, 2025, 10:19am UTC](https://meta.discourse.org/t/using-the-new-custom-homepage-feature/302496/45 "2025-03-24T10:19:33Z")
So I’ve been using this quite a lot, together with my [Homepage Blocks](https://meta.discourse.org/t/homepage-blocks/347066) component. Two suggestions:
## Default classes
I adjusted the component so it always adds a _homepage_ class to the body and an _active_ class to a sidebar link with `href="/custom"`. These features could probably be defaults for the modifier?
```plaintext
api.onPageChange(() => {
const currentRoute = router.currentRoute.name;
const customHomepageLink = document.querySelector(
'.sidebar-section-link[href="/custom"]'
);
if (currentRoute === "discovery.custom") {
document.body.classList.add("homepage");
if (customHomepageLink) {
customHomepageLink.classList.add("active");
}
} else {
document.body.classList.remove("homepage");
if (customHomepageLink) {
customHomepageLink.classList.remove("active");
}
}
});
});
```
_(I initially wanted to add the sidebar link by default, but not being able to edit such a link on the interface seems a real drawback to me, see [How can I edit sidebar links that are added with api.addCommunitySectionLink?](https://meta.discourse.org/t/how-can-i-edit-sidebar-links-that-are-added-with-api-addcommunitysectionlink/357629))_
## Snappy First Paint
I wouldn’t know how to approach this technically. But I wonder, if we land on a custom homepage, which typically shows a limited content selection, could we improve the FCP for the homepage and render it already while the rest of the app is loading? Maybe I’m misunderstanding the nature of the single app architecture here.. it just feels a bit disappointing to be presented the loading animation first, then land on a rather simple page, which by itself could just be there quite instantly.
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [March 25, 2025, 4:25pm UTC](https://meta.discourse.org/t/using-the-new-custom-homepage-feature/302496/46 "2025-03-25T16:25:10Z")
> [@manuel](#):
>
> These features could probably be defaults for the modifier?
Maybe… not sure. It’s relatively easy to add this class now to any component template, you just need to use the `bodyClass` helper. For example, in a separate theme we do this:
```js
{{bodyClass "custom-homepage"}}
...
```
It achieves the same as the `onPageChange` hook, but it’s more reliable. It will only set that class to the body while the component is rendered.
> [@manuel](#):
>
> could we improve the FCP for the homepage and render it already while the rest of the app is loading?
If the component has all the data it needs already, then yes, no reason why it can’t rendered with the rest of the app. In most cases though, the component will need to make a request to get some extra data, which triggers the loading indicator. I can’t think of any easy way to make that load faster, tbh.
* * *
While we’re here, we made an additional improvement to this feature. Until very recently, the crawler view of the custom homepage was not customizable. Now it is, via a server-side HTML outlet: [DEV: Fix custom homepage crawler display and override by pmusaraj · Pull Request #31841 · discourse/discourse · GitHub](https://github.com/discourse/discourse/pull/31841)
---
### Author:  [@OsaIsacson](https://meta.discourse.org/u/OsaIsacson)
#### Post date: [September 3, 2025, 3:36pm UTC](https://meta.discourse.org/t/using-the-new-custom-homepage-feature/302496/48 "2025-09-03T15:36:21Z")
I used to modify my theme using the admin UI, but as I’m now getting a deprecation warning I’m looking at the custom-homepage option instead.
I’ve migrated my `` and css by following [this example](https://github.com/pmusaraj/discourse-sample-custom-homepage). My attempt is [here](https://github.com/osaisacson/discourse-custom-bob-theme). So far so good.
The issue is now how to insert the search bar and the component ‘Who’s Online’.
In my previous `` I simply added {{whos-online}} and {{search-menu}} where I wanted them in the code, but this does not work here - I cannot find how to inject them correctly.
Could someone please point me in the right direction here or know the correct syntax?
Final result should look like [this](https://bygg.boihop.co/) (currently reverted to my previous, soon to be deprecated, code).
---
### Author:  [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [September 3, 2025, 4:30pm UTC](https://meta.discourse.org/t/using-the-new-custom-homepage-feature/302496/49 "2025-09-03T16:30:08Z")
> [@OsaIsacson](#):
>
> `` I simply added {{whos-online}} and {{search-menu}} where I wanted them in the code, but this does not work here - I cannot find how to inject them correctly.
I had a quick look locally, and ran into an issue with the `WhosOnline` component. But after restarting the server, it worked fine. The code I used in the homepage component was:
```plaintext
import WhosOnline from "discourse/plugins/discourse-whos-online/discourse/components/whos-online";
...
```
Keep in mind though that `SearchMenu` is always present, since it is in core, whereas `` comes from a plugin and is only registered if the plugin is enabled.
---
### Author:  [@OsaIsacson](https://meta.discourse.org/u/OsaIsacson)
#### Post date: [September 4, 2025, 12:08pm UTC](https://meta.discourse.org/t/using-the-new-custom-homepage-feature/302496/50 "2025-09-04T12:08:05Z")
That solved the Who’s Online and Search Menu! Awesome. Now I just need to figure out the syntax for getting the feed I’m currently seeing [here](https://bygg.boihop.co/).
Currently it is being shown by just hiding everything else on the page except the feed, inserting the hero, whos online, search menu and links, and then positioning the feed relative to these by overriding the css. Not great.
I’m close to being able to do a custom homepage layout where I can place all the pieces in their proper places, but am missing how to grab the feed. I’ve tried inspecting the current page with Ember and checked out the [discourse app components](https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/components/topic-list)for how to import it but no success.
Any clues?
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [September 4, 2025, 12:28pm UTC](https://meta.discourse.org/t/using-the-new-custom-homepage-feature/302496/51 "2025-09-04T12:28:22Z")
I’d use a component like [Featured Lists](https://meta.discourse.org/t/featured-lists/288916) to feature a topic list with a limited number of topics on the homepage. I believe if you insert the core list, you get an infinite list that lazy loads. Maybe that’s what you want? Though why bother then to add a separate homepage, rather than just building out your landing page right on that topic list view?
You could also look at my component [Homepage Blocks](https://meta.discourse.org/t/homepage-blocks/347066) to arrange your homepage layout. You can add components and arrange their order through an editor. The component also adds a body class `homepage` and an additional wrapper element `homepage-blocks` that you can use for better responsive styling. E.g. you could define a grid on the wrapper and adjust your layout depending on width, so you have one layout with a sidebar and main content on wide screens and a single row layout with all your content stacked up on more narrow views. Right now your sidebar items just shrink which might not look ideal on some widths.
This would be a simple example of a homepage grid that switches layout depending on width: [https://forum.zolidar.com](https://forum.zolidar.com).
[Previous page](https://meta.discourse.org/t/using-the-new-custom-homepage-feature/302496.md?page=1)