Create a new topic button with category and topic template

This is possible. You need to first prep your category with a topic template. Go the category you want to use and edit its topic template like so:


Then find out what the id of the category is. You can do this by going to your.site.com/categories.json

Here on meta it looks like this:

There’s probably a better way to find the categoryId but this works as needed here.

Now, let’s say I want to use the Contribute > Bug category. The Id for it would be “1” based on /categories.json

For Contribute > Feature, it would be “2” and so on.


Now that you have the id and the category has a topic template, you can copy the code from the theme, make a few modifications, and add it to a separate theme component.

I’v done the modifications here so you can just copy this and change the values as needed:

<script type="text/discourse-plugin" version="0.8.18">
api.decorateWidget("header-buttons:after", helper => {
  if (api.getCurrentUser()) {
      
    // edit these two to your liking
    var $ntb_text = "button text",
      $ntb_icon = "plus",
      
      // no need to edit these
      $ntb_icon_class = ".fa-" + $ntb_icon,
      $ntb_button_class = "btn btn-default btn btn-icon-text",
      $ntb_button_helper = "button#new-create-topic-custom",
      $ntb_icon_helper =
        "i.fa" + $ntb_icon_class + ".d-icon .d-icon-" + $ntb_icon,
      $ntb_label_helper = "span.d-button-label";

    const createTopicCustom = function() {
      const container = Discourse.__container__;
      const Composer = require("discourse/models/composer").default;
      const controller = container.lookup("controller:navigation/category");
      const composerController = container.lookup("controller:composer");

      composerController.open({
        action: Composer.CREATE_TOPIC,
        draftKey: Composer.DRAFT,

        // set the category id below
        // see site.com/categories.json
        // for refrence
        categoryId: 3
      });
    };

    return helper.h(
      $ntb_button_helper,
      {
        className: $ntb_button_class,
        title: $ntb_text,
        onclick: createTopicCustom
      },
      [helper.h($ntb_icon_helper), helper.h($ntb_label_helper, $ntb_text)]
    );
  }
});

</script>

This goes into the </head> section under Common.


Once you’re done, you should have something like this: (I added margins with CSS)

Clicking the new button will open the composer with the category you selected and the topic template for the category will be present as well.

I’m assuming that would be all you need here based on:

16 Likes