# Upcoming Header Changes - Preparing Themes and Plugins

**URL:** https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544
**Category:** Development
**Tags:** dev-news
**Created:** [March 14, 2024, 10:49am UTC](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544 "2024-03-14T10:49:12Z")
**Posts on this page:** 19
**Page:** 2

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [April 17, 2024, 1:07pm UTC](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544/22 "2024-04-17T13:07:09Z")

</div>

Just what is it that’s about to be broken, anyway? Maybe there’s an existing supported theme component that will do the job.

If it just the banner at the top that links to the main site?

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [May 20, 2024, 3:31pm UTC](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544/23 "2024-05-20T15:31:05Z")

</div>

Is there a replacement for:

` api.changeWidgetSetting("header-notifications", "avatarSize", "large");`

This gives me the deprecation warning that leads here:

`The header-notifications widget has been deprecated and changeWidgetSetting is no longer a supported override. `

---

<div class="post-metadata">

### Author: ![gormus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gormus/32/428592_2.png) [@gormus](https://meta.discourse.org/u/gormus)
#### Post date: [June 4, 2024, 7:57am UTC](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544/29 "2024-06-04T07:57:25Z")

</div>

I am also on the same boat.

Trying to change logo URL the proper way, but the following is not achievable anymore:

```plaintext
api.changeWidgetSetting("home-logo", "href", "https://my-other-homepage/");

```

What is the replacement API call for this?

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [June 4, 2024, 9:38am UTC](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544/30 "2024-06-04T09:38:44Z")

</div>

We are working on creating a clean solution for this, but it’s not quite ready yet. Keep an eye on this topic for updates.

---

<div class="post-metadata">

### Author: ![kana.tatsuta](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/kana.tatsuta/32/336135_2.png) [@kana.tatsuta](https://meta.discourse.org/u/kana.tatsuta)
#### Post date: [June 6, 2024, 9:34am UTC](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544/31 "2024-06-06T09:34:47Z")

</div>

Hi @david - can a clean solution be ready by Friday June 7? If not, could you provide an estimate?  
Sorry for rush, we are starting closed Beta on June 17 and need to know if this will be implemented before the testing or not.

---

<div class="post-metadata">

### Author: ![david](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/david/32/157490_2.png) [@david](https://meta.discourse.org/u/david)
#### Post date: [June 6, 2024, 11:49am UTC](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544/32 "2024-06-06T11:49:23Z")

</div>

I don’t have an exact date, but it’s likely to be in the next 1-2 weeks. It won’t be ready by tomorrow.

If you need something working for tomorrow, then I’d recommend using the old API, which will automatically switch your site to use the legacy header implementation.

---

<div class="post-metadata">

### Author: ![saquetim](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/saquetim/32/116400_2.png) [@saquetim](https://meta.discourse.org/u/saquetim)
#### Post date: [June 13, 2024, 7:30pm UTC](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544/33 "2024-06-13T19:30:48Z")

</div>

@kana.tatsuta the new API is merged.

I added a [section](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544#altering-the-home-logo-anchor-url-10) on the OP with examples of how to customize the logo URL.

---

<div class="post-metadata">

### Author: ![saquetim](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/saquetim/32/116400_2.png) [@saquetim](https://meta.discourse.org/u/saquetim)
#### Post date: [June 20, 2024, 5:59pm UTC](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544/35 "2024-06-20T17:59:54Z")

</div>

We’ve enabled the [admin notice](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544#admin-notice-5) for new deploys on instances using incompatible plugins or themes.

---

<div class="post-metadata">

### Author: ![tradmo](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/tradmo/32/426966_2.png) [@tradmo](https://meta.discourse.org/u/tradmo)
#### Post date: [June 25, 2024, 4:19pm UTC](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544/36 "2024-06-25T16:19:50Z")

</div>

I’m not sure how to update my code. I’ve tried a few things, but every time the images show from the light theme instead of my dark theme and what’s been directly uploaded for these images in the component. Any suggestions on what this should be refactored to?

```plaintext
<script type="text/discourse-plugin" version="0.8.25">
  api.reopenWidget("home-logo", {
    logoUrl() {
      return (
        settings.Alternative_logo_url || ""
      );
    },

    mobileLogoUrl() {
      return (
        settings.Alternative_mobile_logo_url || ""
      );
    },

    smallLogoUrl() {
      return (
        settings.Alternative_small_logo_url || ""
      );
    }
  });
</script>

```

---

<div class="post-metadata">

### Author: ![saquetim](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/saquetim/32/116400_2.png) [@saquetim](https://meta.discourse.org/u/saquetim)
#### Post date: [June 25, 2024, 4:32pm UTC](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544/37 "2024-06-25T16:32:18Z")

</div>

@tradmo,

Try using a connector in the `home-logo-contents` plugin outlet. Your code would be translated to something like:

```js
// javascripts/discourse/initializers/customize-logo.gjs

import HomeLogoContents from "discourse/components/header/home-logo-contents";
import { withPluginApi } from "discourse/lib/plugin-api";

export default {
  name: `logo-customizations`,
  initialize(container) {
    withPluginApi("1.29.0", (api) => {
      renderHomeLogo(api);
    });
  },
};

function renderHomeLogo(api) {
  const logoSmallUrl = settings.Alternative_small_logo_url || "";
  const logoUrl = settings.Alternative_logo_url || "";
  const mobileLogoUrl = settings.Alternative_mobile_logo_url || "";

  api.renderInOutlet("home-logo-contents", <template>
    <HomeLogoContents
      @logoSmallUrl={{logoSmallUrl}}
      @logoUrl={{logoUrl}}
      @minimized={{@outletArgs.minimized}}
      @mobileLogoUrl={{mobileLogoUrl}}
      @showMobileLogo={{@outletArgs.showMobileLogo}}
      @title={{@outletArgs.title}}
    />
  </template>);
}

```

---

<div class="post-metadata">

### Author: ![angelinekwan](https://avatars.discourse-cdn.com/v4/letter/a/e68b1a/32.png) [@angelinekwan](https://meta.discourse.org/u/angelinekwan)
#### Post date: [June 26, 2024, 2:27pm UTC](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544/38 "2024-06-26T14:27:28Z")

</div>

For `reopenWidget (sidebar-toggle)`, could you help me to understand how to replace the following code? I didn’t find instruction in this guide

```plaintext
// /javascripts/discourse/api-initializers/desktop-open-sidebar-always.js
/* sidebarToggle button removed by "reopenWidget", applicationController forces showSidebar to true (for desktopView) */

import { withPluginApi } from "discourse/lib/plugin-api";
import { reopenWidget } from "discourse/widgets/widget";

function sidebarToggle(api) {
  const applicationController = api.container.lookup("controller:application");
  api.reopenWidget("sidebar-toggle", {
    html(attrs) {
      if (this.site.desktopView == true && attrs.showSidebar == false) {
        applicationController.set("showSidebar", true);
      }
    },
  });
}

export default {
  name: "desktop-open-sidebar-always",
  initialize() {
    withPluginApi("0.10.1", sidebarToggle);
  },
};

```

---

<div class="post-metadata">

### Author: ![Danny\_Dainton](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/danny_dainton/32/486326_2.png) [@Danny\_Dainton](https://meta.discourse.org/u/Danny_Dainton)
#### Post date: [June 27, 2024, 9:22am UTC](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544/39 "2024-06-27T09:22:33Z")

</div>

Hey folks 👋,

Would anyone be able to help me out with the changes I need for this, please?

```javascript
<script type="text/discourse-plugin" version="0.4">
const { iconNode } = require("discourse-common/lib/icon-library");

api.decorateWidget('header-icons:before', helper => {
    return helper.h('li', [
        helper.h('a#graduation-cap.icon', {
            href:'https://example.com/',
            title: 'Learning Center'
        }, iconNode('graduation-cap')),
    ]);
});
</script>

```

I believe I need to convert it to use `api.headerIcons.add(“foo”, FooIcon, { before: “search” })` but i’m not 100% sure how to do that ☹

Any help here would be very much appreciated 🙏

---

<div class="post-metadata">

### Author: ![saquetim](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/saquetim/32/116400_2.png) [@saquetim](https://meta.discourse.org/u/saquetim)
#### Post date: [June 27, 2024, 10:21pm UTC](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544/40 "2024-06-27T22:21:58Z")

</div>

> [@angelinekwan](#):
>
> For `reopenWidget (sidebar-toggle)`, could you help me to understand how to replace the following code? I didn’t find instruction in this guide
> 
> ```plaintext
> // /javascripts/discourse/api-initializers/desktop-open-sidebar-always.js
> /* sidebarToggle button removed by "reopenWidget", applicationController forces showSidebar to true (for desktopView) */
> 
> import { withPluginApi } from "discourse/lib/plugin-api";
> import { reopenWidget } from "discourse/widgets/widget";
> 
> function sidebarToggle(api) {
> const applicationController = api.container.lookup("controller:application");
> api.reopenWidget("sidebar-toggle", {
> html(attrs) {
> if (this.site.desktopView == true && attrs.showSidebar == false) {
> applicationController.set("showSidebar", true);
> }
> },
> });
> }
> 
> export default {
> name: "desktop-open-sidebar-always",
> initialize() {
> withPluginApi("0.10.1", sidebarToggle);
> },
> 
> ```

Hey @angelinekwan,

Here’s our recommendation:

1. Remove your existing `javascripts/discourse/api-initializers/desktop-open-sidebar-always.js` file

2. Create a new file: `javascripts/discourse/pre-initializers/desktop-open-sidebar-always.js` and add the following code:

```js
import { withPluginApi } from "discourse/lib/plugin-api";

const PLUGIN_NAME = "desktop-open-sidebar-always";

export default {
  name: PLUGIN_NAME,

  initialize() {
    withPluginApi("1.34.0", (api) => {
      api.modifyClass("controller:application", {
        pluginId: PLUGIN_NAME,

        calculateShowSidebar() {
          if (this.site.desktopView && this.canDisplaySidebar) {
            return true;
          }

          return this._super(...arguments);
        },
      });
    });
  },
};

```

Add the following to `common/common.scss`

```scss
html.desktop-view {
  .header-sidebar-toggle {
    display: none;
  }
}

```

---

<div class="post-metadata">

### Author: ![saquetim](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/saquetim/32/116400_2.png) [@saquetim](https://meta.discourse.org/u/saquetim)
#### Post date: [June 27, 2024, 10:35pm UTC](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544/41 "2024-06-27T22:35:37Z")

</div>

> [@Danny\_Dainton](#):
>
> Would anyone be able to help me out with the changes I need for this, please?
> 
> ```plaintext
> <script type="text/discourse-plugin" version="0.4">
> const { iconNode } = require("discourse-common/lib/icon-library");
> 
> api.decorateWidget('header-icons:before', helper => {
> return helper.h('li', [
> helper.h('a#graduation-cap.icon', {
> href:'https://example.com/',
> title: 'Learning Center'
> }, iconNode('graduation-cap')),
> ]);
> });
> </script>
> 
> ```
> 
> I believe I need to convert it to use `api.headerIcons.add(“foo”, FooIcon, { before: “search” })` but i’m not 100% sure how to do that ☹
> 
> Any help here would be very much appreciated 🙏

HI @Danny_Dainton,

Take a look at the [Custom Header Links (icons)](https://meta.discourse.org/t/custom-header-links-icons/86307) theme-component. I believe it does what you need.

If you can’t use the theme-component, `api.headerIcons.add` will do the trick. 😃

- Create a new initializer file. It needs to have the extension `.gjs`
- The following code should do what you want:

```js
// javascripts/discourse/initializers/custom-header-icons.gjs

import { apiInitializer } from "discourse/lib/api";
import dIcon from "discourse-common/helpers/d-icon";

export default apiInitializer("1.34.0", (api) => {
  api.headerIcons.add(
    "custom-header-home",
    <template>
      <li>
        <a id="graduation-cap" class="icon" href="https://example.com/" title="Learning Center">
          {{dIcon "graduation-cap"}}
        </a>
      </li>
    </template>,
    { before: "search" }
  );
});

```

---

<div class="post-metadata">

### Author: ![Danny\_Dainton](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/danny_dainton/32/486326_2.png) [@Danny\_Dainton](https://meta.discourse.org/u/Danny_Dainton)
#### Post date: [June 28, 2024, 6:17am UTC](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544/42 "2024-06-28T06:17:50Z")

</div>

Thank you, Sir!

Ah that makes a little more sense to me now after seeing it in front of me.

I very much appreciate your response!! ❤

---

<div class="post-metadata">

### Author: ![av203](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/av203/32/243894_2.png) [@av203](https://meta.discourse.org/u/av203)
#### Post date: [July 2, 2024, 11:42am UTC](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544/47 "2024-07-02T11:42:12Z")

</div>

Appreciate some assistance with migrating this piece of code I can’t figure out how to migrate:

```js
api.reopenWidget("user-dropdown", {
  html(attrs) {
    return h(
      "a.icon",
      {title: I18n.t("custom.string.title")},
      [iconNode("bell"), this.attach("header-notifications", attrs)],
    );
  },
});

```

The goal of this change originally is to keep the user-dropdown menu as is, but replace the profile image with an icon (bell)

---

<div class="post-metadata">

### Author: ![saquetim](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/saquetim/32/116400_2.png) [@saquetim](https://meta.discourse.org/u/saquetim)
#### Post date: [July 4, 2024, 11:17pm UTC](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544/48 "2024-07-04T23:17:02Z")

</div>

> [@av203](#):
>
> The goal of this change originally is to keep the user-dropdown menu as is, but replace the profile image with an icon (bell)

The easiest way to get the effect that you want is to add the icon using the existing `PluginOutlet` and simply hide the user avatar image using CSS.

On a `.gjs` file:

```js
// javascripts/discourse/initializers/user-dropdown-bell-icon.gjs

import { withPluginApi } from "discourse/lib/plugin-api";
import dIcon from "discourse-common/helpers/d-icon";

export default {
  name: "user-dropdown-bell-icon",
  initialize(container) {
    withPluginApi("1.34.0", (api) => {
      api.renderInOutlet("user-dropdown-notifications__before", <template>
        {{dIcon "bell"}}
      </template>);
    });
  },
};

```

Add the following CSS:

```css
.header-dropdown-toggle.user-menu-panel img {
  display: none;
}

```

You get:

 ![image](https://global.discourse-cdn.com/meta/original/4X/b/d/2/bd213a82ab08635034978a86f33d8cf328aeb7ae.png)

---

<div class="post-metadata">

### Author: ![saquetim](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/saquetim/32/116400_2.png) [@saquetim](https://meta.discourse.org/u/saquetim)
#### Post date: [September 4, 2024, 5:53pm UTC](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544/49 "2024-09-04T17:53:27Z")

</div>

[https://github.com/discourse/discourse/pull/28390](https://github.com/discourse/discourse/pull/28390)

The old widget code was removed.

---

<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 8, 2024, 8:21pm UTC](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544/50 "2024-09-08T20:21:01Z")

</div>

Would anybody be able to help me with updating a theme component that adds some text beside the “home-logo”? Thanks in advance.

> [@Add Text In Header Beside Logo](https://meta.discourse.org/t/add-text-in-header-beside-logo/162670/2):
>
> Hey Daniel wave You can use something like this to add text next to the header logo on your site \<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 t…

[Previous page](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544.md?page=1)