# Add Text In Header Beside Logo

**URL:** https://meta.discourse.org/t/add-text-in-header-beside-logo/162670
**Category:** Development
**Created:** [September 1, 2020, 3:19pm UTC](https://meta.discourse.org/t/add-text-in-header-beside-logo/162670 "2020-09-01T15:19:54Z")
**Posts on this page:** 10
**Page:** 1

<div class="post-metadata">

### Author: ![dfuentes](https://avatars.discourse-cdn.com/v4/letter/d/54ee81/32.png) [@dfuentes](https://meta.discourse.org/u/dfuentes)
#### Post date: [September 1, 2020, 3:19pm UTC](https://meta.discourse.org/t/add-text-in-header-beside-logo/162670/1 "2020-09-01T15:19:54Z")

</div>

I’m new to discourse, so I apologize if this is something that is easily done, however, I can’t seem to find where I can define the text that I want to appear beside our logo in the header of our discourse page.

Within the red box in the header is where I’d ideally like to add text saying ‘Community Forums’ or something of the sort:

 ![AddText-Discourse](https://global.discourse-cdn.com/meta/original/3X/e/b/eb52c41ba7b3366bc6c80e8da11d41c80fab59a0.png)

How can I go about getting this done?

Thanks in advance for any and all feedback!

---

<div class="post-metadata">

### Author: ![Johani](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/johani/32/176920_2.png) [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [September 1, 2020, 4:10pm UTC](https://meta.discourse.org/t/add-text-in-header-beside-logo/162670/2 "2020-09-01T16:10:03Z")

</div>

Hey Daniel 👋

You can use something like this to add text next to the header logo on your site

```markdown
<script type="text/discourse-plugin" version="0.8">
api.decorateWidget("home-logo:after", helper => {
  const titleVisible = helper.attrs.minimized;
  const headerText = "Text you want to add"; // <--- change this text

  if (!titleVisible) {
    return api.h("span.header-text", headerText);
  }
});
</script>

```

You’d add it in the header section of your theme / component. You can read more about the Discourse theme system here

> [@Beginner's guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966):
>
> This is a crash course in Discourse theme basics. The target audience is everyone who is not familiar with Discourse themes. If you’ve already used Discourse theme / theme components, this guide is probably not something you need to read. What are themes and theme components? A theme or theme component is a set of files packaged together designed to either modify Discourse visually or to add new features. Let’s start with themes. Themes In general, themes are not supposed to be compatible …

---

<div class="post-metadata">

### Author: ![Jonathan5](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jonathan5/32/197134_2.png) [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [September 1, 2024, 5:41pm UTC](https://meta.discourse.org/t/add-text-in-header-beside-logo/162670/3 "2024-09-01T17:41:59Z")

</div>

> [@Johani](#):
>
> You can use something like this to add text next to the header logo on your site

This is now causing an error banner to be shown, because of changes to Discourse. Do you have any suggestions for achieving the same result with the new approach? Thanks.

---

<div class="post-metadata">

### Author: ![Lilly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/lilly/32/575047_2.png) [@Lilly](https://meta.discourse.org/u/Lilly)
#### Post date: [September 1, 2024, 7:38pm UTC](https://meta.discourse.org/t/add-text-in-header-beside-logo/162670/4 "2024-09-01T19:38:25Z")

</div>

Yea that method will no longer work and you need to use the connectors specified here in the section about the `home-logo` plugin outlet replacing `home-logo:after` widget decorations:

> [@Upcoming Header Changes - Preparing Themes and Plugins](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544):
>
> We’ve recently [been working](https://github.com/discourse/discourse/commit/21f23cc032) on updating Discourse’s header from the legacy ‘widget’ rendering system to modern Glimmer components. This change is now available in Discourse core behind the glimmer header mode site setting. timer_clock Approximate Timeline (very rough estimates - subject to change in either direction) Q1 2024: white_check_mark core implementation finished & enabled on Meta white_check_mark upgrade advice published; console deprecation messages enabled …

> [@Using Plugin Outlet Connectors from a Theme or Plugin](https://meta.discourse.org/t/using-plugin-outlet-connectors-from-a-theme-or-plugin/32727):
>
> Discourse includes hundreds of Plugin Outlets which can be used to inject new content or replace existing contend in the Discourse UI. ‘Outlet arguments’ are made available so that content can be customized based on the context. Choosing an outlet To find the name of a plugin outlet, search Discourse core for “\<PluginOutlet”, or use the [plugin outlet locations](https://meta.discourse.org/t/plugin-outlet-locations-theme-component/100673) theme component. (e.g. topic-above-posts). Wrapper outlets Some outlets in core look like \<PluginOutlet @name="foo" /\>. These allow you…

---

<div class="post-metadata">

### Author: ![Jonathan5](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/jonathan5/32/197134_2.png) [@Jonathan5](https://meta.discourse.org/u/Jonathan5)
#### Post date: [September 2, 2024, 8:31pm UTC](https://meta.discourse.org/t/add-text-in-header-beside-logo/162670/5 "2024-09-02T20:31:49Z")

</div>

If I have time to do that myself I’ll paste the code here. Alternatively, if someone has time first I’d be very grateful… 🙂

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [January 27, 2025, 11:19pm UTC](https://meta.discourse.org/t/add-text-in-header-beside-logo/162670/7 "2025-01-27T23:19:00Z")

</div>

I just did this for a theme. I’m using the site’s title and short description, but you could also insert values from theme settings or localized text.

Add a glimmer component in `components/header-logo-title.gjs`

```gjs
import Component from "@glimmer/component";
import { service } from "@ember/service";

export default class HeaderLogoTitle extends Component {
 @service siteSettings;

 <template>
   {{#unless @outletArgs.minimized}}
     <div class="header-logo-title">
       <span
         class="header-logo-title__title"
       >{{this.siteSettings.title}}</span>
       {{#if this.siteSettings.short_site_description}}
         <span
           class="header-logo-title__description"
         >{{this.siteSettings.short_site_description}}</span>
       {{/if}}
     </div>
   {{/unless}}
 </template>
}

```

Attach it to the outlet in `/api-initializers/my-theme.js`

```js
import { apiInitializer } from "discourse/lib/api";
import HeaderLogoTitle from "../components/header-logo-title";

export default apiInitializer("1.26.0", (api) => {
  api.renderAfterWrapperOutlet("home-logo", HeaderLogoTitle);
});

```

The `#unless`-helper checks for minimized state of the logo and only adds the text when the full logo would be visible. If you always want to show it you’d need to drop that condition.

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [January 27, 2025, 11:34pm UTC](https://meta.discourse.org/t/add-text-in-header-beside-logo/162670/8 "2025-01-27T23:34:57Z")

</div>

> [@manuel](#):
>
> `api.renderInOutlet("home-logo__after", HeaderLogoTitle);`

You can also use `api.renderAfterWrapperOutlet("home-logo")` (since v.1.26.0). It has the advantage you use the actual outlet name without providing the magic ` __before`/`__ after`.

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [January 27, 2025, 11:43pm UTC](https://meta.discourse.org/t/add-text-in-header-beside-logo/162670/9 "2025-01-27T23:43:35Z")

</div>

Thank you @Arkshine. That’s nicer, I updated the previous post.

---

<div class="post-metadata">

### Author: ![James\_Cribbs](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/james_cribbs/32/249821_2.png) [@James\_Cribbs](https://meta.discourse.org/u/James_Cribbs)
#### Post date: [March 20, 2025, 8:53pm UTC](https://meta.discourse.org/t/add-text-in-header-beside-logo/162670/10 "2025-03-20T20:53:30Z")

</div>

Trying to do this now but having some trouble - how do I access the “glimmer component in components/header-logo-title.gjs”?

My community is here: [https://community.worldradioleague.com/](https://community.worldradioleague.com/).

I’m on the paid plan - maybe I don’t have access to Discourse core to see this?

---

<div class="post-metadata">

### Author: ![manuel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/manuel/32/468169_2.png) [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [March 20, 2025, 9:04pm UTC](https://meta.discourse.org/t/add-text-in-header-beside-logo/162670/11 "2025-03-20T21:04:24Z")

</div>

I had wrapped this in a component, you could try using it: [Manuel Kostka / Discourse / Helpers / Header Logo Title · GitLab](https://gitlab.com/manuelkostka/discourse/helpers/header-logo-title). It adds the site title and short site description by default. Alternatively, you can add custom text for the title and the description on the component settings.