# How to customise the header with a plugin?
**URL:** https://meta.discourse.org/t/how-to-customise-the-header-with-a-plugin/52721
**Category:** Development
**Created:** [9 בנובמבר, 2016, 6:50pm UTC](https://meta.discourse.org/t/how-to-customise-the-header-with-a-plugin/52721 "2016-11-09T18:50:12Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@mrded](https://meta.discourse.org/u/mrded)
#### Post date: [9 בנובמבר, 2016, 6:50pm UTC](https://meta.discourse.org/t/how-to-customise-the-header-with-a-plugin/52721/1 "2016-11-09T18:50:12Z")
I’m trying to make a plugin which will change header into something like this
It doesn’t really matter how does it look, that matters is I don’t want to use customisation on `/admin/customize/css_html` path. I want to make a plugin which will magically change everything I need.
That I found so far is, there is no template for the header, it renders via virtual-dom.
The way it renders is following:
1. `assets/javascripts/discourse/templates/application.hbs` template, which can be overloaded, renders `site-header` component.
2. `assets/javascripts/discourse/components/site-header.js.es6` component extends and returns `header` widget.
3. `assets/javascripts/discourse/widgets/header.js.es6` widget generates virtual-dom for the header.
### My thoughts
I can create my own widget `my-header` which will extend existing `header`, there I’ll just update html. I don’t want to copy-paste anything into it, I want just to override `html()` method.
```
/plugins/discourse-foo/assets/javascripts/discourse/widgets/my-header.js.es6
```
Then I can create my own `my-site-header` component which will extend existing `site-header` with just overriding it to point into `my-header` widget.
```
/plugins/discourse-foo/assets/javascripts/discourse/components/my-site-header.js.es6
```
Then I override `application` template to show `my-site-header` component instead of `site-header`
```
/plugins/discourse-foo/assets/javascripts/discourse/templates/application.hbs
{{plugin-outlet "above-site-header"}}
{{my-site-header canSignUp=canSignUp
showCreateAccount="showCreateAccount"
showLogin="showLogin"
showKeyboard="showKeyboardShortcutsHelp"
toggleMobileView="toggleMobileView"
toggleAnonymous="toggleAnonymous"
logout="logout"}}
{{plugin-outlet "below-site-header"}}
```
* * *
The question is, how can I extend all of these components and widgets? Can you please point me to the right way of doing that? Thanks.
---
### Author:  [@codinghorror](https://meta.discourse.org/u/codinghorror)
#### Post date: [9 בנובמבר, 2016, 9:04pm UTC](https://meta.discourse.org/t/how-to-customise-the-header-with-a-plugin/52721/2 "2016-11-09T21:04:26Z")
Based on the screenshot, this seems like something that is plausible to do with just CSS customizations. That would also be much simpler than writing a plugin and would not require updating with new versions of Discourse code.
---
### Author:  [@mrded](https://meta.discourse.org/u/mrded)
#### Post date: [10 בנובמבר, 2016, 9:49am UTC](https://meta.discourse.org/t/how-to-customise-the-header-with-a-plugin/52721/3 "2016-11-10T09:49:00Z")
Well, I knew you going to say that, that’s why I mentioned that I need a plugin 🙂
First of all, because I want to learn how to do plugins, I’ll have to do whole lot more complicated things later. That menu is just an example.
Secondly, I really need that menu to be a plugin, because:
1. We may reuse it on different projects;
2. We need a version control, to roll back sometimes;
3. Some links will be generated from external json;
4. I want a clean solution. I believe doing it with a plugin is a clean solution;
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [10 בנובמבר, 2016, 11:03am UTC](https://meta.discourse.org/t/how-to-customise-the-header-with-a-plugin/52721/4 "2016-11-10T11:03:25Z")
[Sitepoint](https://www.sitepoint.com/community/) use a plugin to override the header.
Take a look here:
> [@Adding links to Discourse header](https://meta.discourse.org/t/adding-links-to-discourse-header/47830):
>
> I noticed that the [Sitepoint forums](https://www.sitepoint.com/community/) have links within the Discourse header itself. How was this achieved? I came across a post that suggested adding links above the header and then using CSS to position them so it looks like they’re part of the Discourse header. I’d prefer not to do it this way but to add markup directly in the normal header if possible. I was thinking a plugin, but I can only add markup where a plugin outlet exists right?
---
### Author:  [@mrded](https://meta.discourse.org/u/mrded)
#### Post date: [10 בנובמבר, 2016, 11:32am UTC](https://meta.discourse.org/t/how-to-customise-the-header-with-a-plugin/52721/5 "2016-11-10T11:32:57Z")
Thank you for your link, it will be definitely interesting to see how other people are doing it.
As I see now, they are not extending existing header widget. They just copy-pasted it from the core and customised it.
In that case they have to support that code themselves, and Discourse most likely to break it on next update.