# Is it possible to modify a function in a helper via the plugin or theme component system?

**URL:** https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964
**Category:** Development
**Created:** [February 7, 2020, 8:09am UTC](https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964 "2020-02-07T08:09:35Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![AstonJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/astonj/32/215041_2.png) [@AstonJ](https://meta.discourse.org/u/AstonJ)
#### Post date: [February 7, 2020, 8:09am UTC](https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964/1 "2020-02-07T08:09:36Z")

</div>

Is there a way to reopen a class and overwrite a function?

The one I need to overwrite is `function categoryStripe(color, classes) {}` on line 15 from here: [javascripts/discourse/helpers/category-link.js.es6](https://github.com/discourse/discourse/blob/b25d9e96c1414bf78b44221da4d385675843991e/app/assets/javascripts/discourse/helpers/category-link.js.es6).

---

<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: [February 7, 2020, 1:45pm UTC](https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964/2 "2020-02-07T13:45:25Z")

</div>

I believe so. Have you seen [Developing Discourse Themes & Theme Components](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648)

---

<div class="post-metadata">

### Author: ![justin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/justin/32/157614_2.png) [@justin](https://meta.discourse.org/u/justin)
#### Post date: [February 7, 2020, 3:28pm UTC](https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964/3 "2020-02-07T15:28:18Z")

</div>

There are a number of ways to do what you’re asking. What’s your aim on overwriting `categoryStripe`?

---

<div class="post-metadata">

### Author: ![AstonJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/astonj/32/215041_2.png) [@AstonJ](https://meta.discourse.org/u/AstonJ)
#### Post date: [February 7, 2020, 5:45pm UTC](https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964/4 "2020-02-07T17:45:20Z")

</div>

> [@justin](#):
>
> There are a number of ways to do what you’re asking. What’s your aim on overwriting `categoryStripe` ?

I’d like to change it from:

```js
function categoryStripe(color, classes) {
  var style = color ? "style='background-color: #" + color + ";'" : "";
  return "<span class='" + classes + "' " + style + "></span>";
}

```

to:

```js
function categoryStripe(color, classes) {
  var style = color ? "style='border: 1px solid #" + color + ";'" : "";
  return "<span class='" + "my-class" + classes + "' " + style + "></span>";
}

```

So changing background colour to a border and adding a class.

What’s the best way to achieve this Justin?

* * *

> [@pfaffman](#):
>
> I believe so. Have you seen [Developer’s guide to Discourse Themes](https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648)

I did read that, however IIRC it only covers the ability to overwrite templates (and widgets) with no mention of helpers, I think?

---

<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: [February 7, 2020, 5:50pm UTC](https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964/5 "2020-02-07T17:50:48Z")

</div>

> [@AstonJ](#):
>
> I did read that, however IIRC it only covers the ability to overwrite templates (and widgets) with no mention of helpers, I think?

None of that was obvious from your first post. I think that you’ll now get a useful answer that I’m interested to see!

---

<div class="post-metadata">

### Author: ![justin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/justin/32/157614_2.png) [@justin](https://meta.discourse.org/u/justin)
#### Post date: [February 7, 2020, 6:02pm UTC](https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964/6 "2020-02-07T18:02:16Z")

</div>

Have you considered adding the class via JavaScript or overriding the inline style using `!important` in the stylesheet? While you can work to override this method, it will break eventually. Adding to the DOM via JS is probably the most stable way to go.

---

<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: [February 7, 2020, 6:06pm UTC](https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964/7 "2020-02-07T18:06:48Z")

</div>

> [@justin](#):
>
> Have you considered adding the class via JavaScript

What I was trying to figure out the other day was pretty much that. I wanted to add a custom class to posts in all topics (but not the topic/original post). I would want to be able to turn that custom class on/off by user group and topic created\_at, but I thought I might be able to figure that out once I’d figured out how to add the custom class to posts. I didn’t see quite the example I was looking for, but a couple of other things may have distracted me before I found the example.

---

<div class="post-metadata">

### Author: ![AstonJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/astonj/32/215041_2.png) [@AstonJ](https://meta.discourse.org/u/AstonJ)
#### Post date: [February 7, 2020, 6:08pm UTC](https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964/8 "2020-02-07T18:08:12Z")

</div>

I don’t think that will work because I need the colour to be fetched from the category settings - so the border colour will vary for each category. (I’ve updated my [post above](https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964/4) to reflect this.)

Unless that can be fetched via JS (/adding to the DOM)? (If so can you give me an example please?)

---

<div class="post-metadata">

### Author: ![justin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/justin/32/157614_2.png) [@justin](https://meta.discourse.org/u/justin)
#### Post date: [February 7, 2020, 6:16pm UTC](https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964/9 "2020-02-07T18:16:07Z")

</div>

I’d have to dig into the specifics to see if what you’re doing is feasible with just JS selection (unfortunately don’t have the time right now).

But you can see adding of a class here: [discourse-knowledge-base-theme/javascripts/discourse/components/knowledge-base.js.es6 at 4694d4a8ad788f8884e3341c852d3f77b2c1d103 · discourse/discourse-knowledge-base-theme · GitHub](https://github.com/discourse/discourse-knowledge-base-theme/blob/4694d4a8ad788f8884e3341c852d3f77b2c1d103/javascripts/discourse/components/knowledge-base.js.es6#L24)

You can also modify inline styles with JS: [Setting CSS Styles using JavaScript | KIRUPA](https://www.kirupa.com/html5/setting_css_styles_using_javascript.htm)

---

<div class="post-metadata">

### Author: ![AstonJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/astonj/32/215041_2.png) [@AstonJ](https://meta.discourse.org/u/AstonJ)
#### Post date: [February 7, 2020, 6:19pm UTC](https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964/10 "2020-02-07T18:19:26Z")

</div>

Thanks Justin, I’ll take a look.

Or is there a way to overwrite helpers ([discourse/app/assets/javascripts/discourse/helpers/category-link.js.es6 at b25d9e96c1414bf78b44221da4d385675843991e · discourse/discourse · GitHub](https://github.com/discourse/discourse/blob/b25d9e96c1414bf78b44221da4d385675843991e/app/assets/javascripts/discourse/helpers/category-link.js.es6)) like we can templates/components/widgets etc?

I don’t mind having to keep an eye on that file for future changes if need be 😃

---

<div class="post-metadata">

### Author: ![justin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/justin/32/157614_2.png) [@justin](https://meta.discourse.org/u/justin)
#### Post date: [February 7, 2020, 6:22pm UTC](https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964/11 "2020-02-07T18:22:18Z")

</div>

You can try creating a file in your theme at `javascripts/discourse/helpers/category-link.js.es6` and adding a modified version of that function there. It’s been a while since I’ve had to mess around that far so I can’t guarantee if that’ll work! 😃

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [February 7, 2020, 6:50pm UTC](https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964/12 "2020-02-07T18:50:07Z")

</div>

Yup, that should work.

---

<div class="post-metadata">

### Author: ![AstonJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/astonj/32/215041_2.png) [@AstonJ](https://meta.discourse.org/u/AstonJ)
#### Post date: [February 7, 2020, 6:50pm UTC](https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964/13 "2020-02-07T18:50:54Z")

</div>

Thanks both!

Last question (hopefully!) how do I create a file there? 😌

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [February 7, 2020, 6:51pm UTC](https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964/14 "2020-02-07T18:51:34Z")

</div>

In a plugin that’s easy, create the folder and just copy and paste!

---

<div class="post-metadata">

### Author: ![AstonJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/astonj/32/215041_2.png) [@AstonJ](https://meta.discourse.org/u/AstonJ)
#### Post date: [February 7, 2020, 6:53pm UTC](https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964/15 "2020-02-07T18:53:03Z")

</div>

Ah!!! Thanks Robert!

I have to pop out now but will try that as soon as I get back in 👌

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [February 7, 2020, 6:53pm UTC](https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964/16 "2020-02-07T18:53:36Z")

</div>

Demo:

Plugin folder structure:

![image](https://global.discourse-cdn.com/meta/original/3X/f/3/f328a5cb4ab854bf38e37ae1174f5ebe49cc1be4.png)

Spot the sneaky edit 🕵️‍♂️

 ![image](https://global.discourse-cdn.com/meta/original/3X/9/6/96bef916368f4a067006771d512ed114de92b658.png)

![image](https://global.discourse-cdn.com/meta/original/3X/0/f/0ff28ede3b271c081fb94a83d1da294ce7ca57f8.png)

---

<div class="post-metadata">

### Author: ![AstonJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/astonj/32/215041_2.png) [@AstonJ](https://meta.discourse.org/u/AstonJ)
#### Post date: [February 8, 2020, 12:00am UTC](https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964/17 "2020-02-08T00:00:19Z")

</div>

Thanks Robert!

It’s not working tho 😭

Here’s what I did:

`rails g plugin CategoryAlternative`

Then put this:

 ![Screenshot 2020-02-07 at 23.40.35](https://global.discourse-cdn.com/meta/original/3X/8/4/84761453c7f8905bc3061279d337dbc12426a4c9.png)

In a `helpers` folder that I had to create:

 ![Screenshot 2020-02-07 at 23.38.47](https://global.discourse-cdn.com/meta/original/3X/4/d/4de5cda719c37d1bc2257e37392bda4d7c24f247.png)

Then:

```plaintext
rm -rf tmp
rails s

```

It’s showing in the AdminCP but no changes reflect on the actual page (changes show if I edit the non-plugin version of the file tho with the exact same edits)

 ![Screenshot 2020-02-08 at 00.09.07](https://global.discourse-cdn.com/meta/original/3X/7/5/75e5da6ab6ed2566e6c43ee4f283033b4c341cf4.png)

Have I missed something? Do I need to configure anything else?

---

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [February 8, 2020, 6:06am UTC](https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964/18 "2020-02-08T06:06:22Z")

</div>

Are you getting any javascript console errors?

Did you include the _entire file_?

NB I did not use the plugin generator, I just created all that manually.

---

<div class="post-metadata">

### Author: ![AstonJ](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/astonj/32/215041_2.png) [@AstonJ](https://meta.discourse.org/u/AstonJ)
#### Post date: [February 8, 2020, 7:09pm UTC](https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964/19 "2020-02-08T19:09:26Z")

</div>

> [@merefield](#):
>
> Did you include the _entire file_ ?

I didn’t at the time of writing (as I thought Justin meant to just include that function) however, although including the whole file got it to work - it wasn’t the same as when I directly edited the file.

For instance it worked on the `latest` page, but not in the `all categories` drop down… which did work when I edited the file directly!

So I’ve ended up making the changes I needed via some messy CSS 😂 and I’ve had to make some compromises too - it’s definitely better than not being able to have done it, but ideally I would have preferred something as simple as changing a category style to be as simple as editing a template 😓

---

<div class="post-metadata">

### Author: ![Canapin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/canapin/32/119591_2.png) [@Canapin](https://meta.discourse.org/u/Canapin)
#### Post date: [September 27, 2020, 9:35pm UTC](https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964/20 "2020-09-27T21:35:31Z")

</div>

I’d like to do that as well.  
Here’s the path of the file I try to override in my theme component:  
`custom_loader\javascripts\discourse\helpers\loading-spinner.js`  
But the js file isn’t loaded. What am I missing?

[Next page](https://meta.discourse.org/t/is-it-possible-to-modify-a-function-in-a-helper-via-the-plugin-or-theme-component-system/140964.md?page=2)
