# (Superseded) Add a "+ New Topic" button on every page

**URL:** <https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922>\
**Category:** Site Management\
**Tags:** how-to\
**Created:** [2016年二月2日 20:28 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922 "2016-02-02T20:28:28Z")\
**Posts on this page:** 10\
**Page:** 2

<div class="post-metadata">

**Author:** ![dalerka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dalerka/32/120265_2.png) [@dalerka](https://meta.discourse.org/u/dalerka)\
**Post date:** [2017年十二月15日 04:34 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/21 "2017-12-15T04:34:24Z")

</div>

This solution doesn’t seem to work. I see no “+ New Topic” button as described in the first post.  
@techAPJ could you please update this to work with the current Discourse version?

I also considered [Adding header links post vdom upgrade](https://meta.discourse.org/t/adding-header-links-post-vdom-upgrade/43284) to call the `/new-topc` API, but that will trigger loading a new page, instead of just loading the _Composer_.

---

<div class="post-metadata">

**Author:** ![dalerka](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dalerka/32/120265_2.png) [@dalerka](https://meta.discourse.org/u/dalerka)\
**Post date:** [2017年十二月15日 12:50 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/22 "2017-12-15T12:50:50Z")

</div>

Ooookay, this simple thing took longer to implement because the following code **does not work if put in the `</body>` section** , but does work if put in:  
Customize ➡ Edit CSS/HTML ➡`</head>`

**Result:**  
 ![Create_button](https://global.discourse-cdn.com/meta/original/3X/c/b/cb92d8a6150b26ce0b04c8499dbd14402fdd1011.jpg)

> **See code**
>
> ```plaintext
> <!--Show "Create" button in the Header (only for authenticated users) -->
> <script type="text/discourse-plugin" version="0.4">
> api.decorateWidget('header-buttons:after', helper => {
> if (Discourse.User.current()) {
> const createTopic = function() {
> const Composer = require('discourse/models/composer').default;
> const composerController = Discourse. __container__.lookup('controller:composer');
> composerController.open({ action: Composer.CREATE_TOPIC, draftKey: Composer.DRAFT });
> }
> return helper.h('button#create-new', {
> className: "btn fa fa-plus",
> title: "Create",
> onclick: createTopic
> }, '' ); // ''-this is 'text' for the button, change as needed.
> }
> });
> </script>
> <style>
> /* Hide the original "+ New Topic" button */
> button#create-topic { 
> display: none;
> }
> /* Larger "Create" button on Desktop */
> button#create-new {
> font-size: x-large;
> height: 39px;
> width: 39px;
> padding: 0;
> color: white;
> border-radius: 50px;
> border: 3px solid white;
> }
> button#create-new:hover {
> border: none;
> }
> /* Smaller "Create" button on Mobile */
> html.mobile-view.mobile-device button#create-new {
> height: 32px;
> width: 32px;
> margin: 3px;
> }
> </style>
> 
> ```

If someone has a better way, please let me know! Otherwise, style as you wish and enjoy 😉

---

<div class="post-metadata">

**Author:** ![bekircem](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bekircem/32/44582_2.png) [@bekircem](https://meta.discourse.org/u/bekircem)\
**Post date:** [2018年一月21日 08:55 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/25 "2018-01-21T08:55:55Z")

</div>

> [@rewphus](#):
>
> #create-topic.btn-default{  
> width: 63px;  
> height: 63px;  
> color: #2196F3; //your color of choice  
> -webkit-transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, -webkit-transform .5s;  
> transition: right .5s, bottom .5s, border-radius .5s, text-indent .2s, visibility 1s, width .2s ease, height .5s ease .4s, color .5s, background-color 2s, transform .5s;  
> }
> 
> #create-topic.btn-default .fa-plus{  
> color: white;  
> }
> 
> #create-topic.btn-default:hover{  
> text-indent: 0px;  
> width: 190px;  
> color: white;  
> }

Excellent! How can we show it on the topic page too?

Edit: On the mobile view, fa-plus symbol not centered on the in the circle.

---

<div class="post-metadata">

**Author:** ![PaulSTC](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/paulstc/32/86814_2.png) [@PaulSTC](https://meta.discourse.org/u/PaulSTC)\
**Post date:** [2018年一月24日 08:53 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/26 "2018-01-24T08:53:29Z")

</div>

The code kindly provided by @dalerka worked for me and I could also modify it to place a custom text-button to the right of the avatar like the original post

> **See code - all placed in 'head' section**
>
> ```js
> <script type="text/discourse-plugin" version="0.4">
> api.decorateWidget('header-buttons:after', helper => {
> if (Discourse.User.current()) {
> const createTopic = function() {
> const Composer = require('discourse/models/composer').default;
> const composerController = Discourse. __container__.lookup('controller:composer');
> composerController.open({ action: Composer.CREATE_TOPIC, draftKey: Composer.DRAFT });
> }
>             
> return helper.h(
>                 
> 'button#newcase', {
> className: "btn btn-text btn-primary create ember-view",
> title: "Add Case",
> onclick: createTopic,}, 'Add Case' // ''-this is 'text' for the button, change as needed.
> );  
> }
> });
> </script>
> <style>
> button#newcase {
> float: right;
> max-width:none; /*remove max width*/
> width: auto; /*prevent other widths taking over*/
> height: auto;
> z-index: 1040; /*stays on top of other header*/
> position:relative;
> display:block;
> margin: 6px 9px;
> padding: 6px 12px;
> text-align: center;
> cursor: pointer;
> transition: all .25s;
> }
> }
> </style>
> 
> ```

Gives you:

 ![button](https://global.discourse-cdn.com/meta/original/3X/a/2/a2e396e315845b14b58ceadb832bd638c7581af9.png)

---

<div class="post-metadata">

**Author:** ![Anil\_Gupta](https://avatars.discourse-cdn.com/v4/letter/a/58956e/32.png) [@Anil\_Gupta](https://meta.discourse.org/u/Anil_Gupta)\
**Post date:** [2018年一月24日 19:35 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/27 "2018-01-24T19:35:14Z")

</div>

Thanks @dalerka , the topic creation code works for us too.  
I have **not** seen any delay in popping up of writing dialog as reported by other user. It works fine in our testing.

---

<div class="post-metadata">

**Author:** ![dakotahnorth](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/dakotahnorth/32/90519_2.png) [@dakotahnorth](https://meta.discourse.org/u/dakotahnorth)\
**Post date:** [2018年二月28日 03:59 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/28 "2018-02-28T03:59:09Z")

</div>

Thanks for the code! Modified it slightly so that the plus button has the same style as the other buttons.

There must be a better way for me to have done this with classes, but after struggling with it for some time, I broke down and just added the properties directly.

Below are the results …

 ![37%20PM](https://global.discourse-cdn.com/meta/original/3X/1/e/1effbcabd5932ae483aa1e45cc1860adb3613eee.png)

> **See code**
>
> ```plaintext
> <!--Show "Create" button in the Header (only for authenticated users) -->
> <script type="text/discourse-plugin" version="0.4">
> api.decorateWidget('header-buttons:after', helper => {
> if (Discourse.User.current()) {
> const createTopic = function() {
> const Composer = require('discourse/models/composer').default;
> const composerController = Discourse. __container__.lookup('controller:composer');
> composerController.open({ action: Composer.CREATE_TOPIC, draftKey: Composer.DRAFT });
> }
> return helper.h('button#create-new', {
> className: "btn fa fa-plus",
> title: "Create",
> onclick: createTopic
> }, '' ); // ''-this is 'text' for the button, change as needed.
> }
> });
> </script>
> <style>
> /* Hide the original "+ New Topic" button */
> button#create-topic { 
> display: none;
> }
> /* Larger "Create" button on Desktop */
> button#create-new {
> margin-top:2px;
> font-size: large;
> height: 38px;
> width: 38px;
> line-height: 40PX;
> padding: 0;
> color: rgb(153, 153, 153);
> opacity: 0.699999988079071;
> background-color: transparent;
> }
> button#create-new:hover {
>         
> color: rgb(40, 40, 40);    
> background-color: rgb(233,233,233);
>         
> }
>     
> /* Smaller "Create" button on Mobile */
> html.mobile-view.mobile-device button#create-new {
> height: 32px;
> width: 32px;
> margin: 3px;
> }
> </style>
> 
> ```

---

<div class="post-metadata">

**Author:** ![erlend\_sh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlend_sh/32/119475_2.png) [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)\
**Post date:** [2018年四月4日 14:12 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/29 "2018-04-04T14:12:14Z")

</div>

Now maintained as a proper theme component:

> [@New Topic Header Button](https://meta.discourse.org/t/new-topic-button-on-all-pages-theme-component/84551):
>
> discourse2Summary New Topic Header Button adds a convenient ‘New Topic’ button to the header of all pageseyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/new-topic-header-button)hammer_and_wrenchRepository [https://github.com/discourse/discourse-new-topic-button-theme-component](https://github.com/discourse/discourse-new-topic-button-theme-component)questionInstall Guide [How to install a theme or theme component](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme component Features A simple theme comp…

---

<div class="post-metadata">

**Author:** ![erlend\_sh](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/erlend_sh/32/119475_2.png) [@erlend\_sh](https://meta.discourse.org/u/erlend_sh)\
**Post date:** [2018年四月4日 14:12 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/30 "2018-04-04T14:12:17Z")

</div>



---

<div class="post-metadata">

**Author:** ![mcwumbly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcwumbly/32/103861_2.png) [@mcwumbly](https://meta.discourse.org/u/mcwumbly)\
**Post date:** [2022年九月22日 19:18 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/31 "2022-09-22T19:18:11Z")

</div>



---

<div class="post-metadata">

**Author:** ![mcwumbly](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mcwumbly/32/103861_2.png) [@mcwumbly](https://meta.discourse.org/u/mcwumbly)\
**Post date:** [2022年九月22日 19:18 UTC](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922/32 "2022-09-22T19:18:13Z")

</div>



[上一頁](https://meta.discourse.org/t/superseded-add-a-new-topic-button-on-every-page/38922.md?page=1)