# 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:** 1
**Showing post:** 41

<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" }
  );
});

```

---

_[View the full topic](https://meta.discourse.org/t/upcoming-header-changes-preparing-themes-and-plugins/296544)._