# Layouts Plugin **URL:** https://meta.discourse.org/t/layouts-plugin/55208 **Category:** Plugin **Tags:** pavilion, broken **Created:** [January 5, 2017, 9:41am UTC](https://meta.discourse.org/t/layouts-plugin/55208 "2017-01-05T09:41:13Z") **Posts on this page:** 1 **Showing post:** 10
### Author: ![angus](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/angus/32/341715_2.png) [@angus](https://meta.discourse.org/u/angus) #### Post date: [January 30, 2017, 3:13pm UTC](https://meta.discourse.org/t/layouts-plugin/55208/10 "2017-01-30T15:13:35Z")
Hey @Alavi1412, if I’m understanding you correctly, you want to modify the profile widget to add a button that allows the user to open the composer to create a new topic? Any button has two basic parts two it: the button element, and the button action. I think you already understand the button element part. As you say you’ll need to use the `button` widget with the appropriate classes, icon and label (note that the button widget doesn’t have a `rawLabel`, only a link does - go to the [button widget file](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/widgets/button.js.es6) and search for ‘rawlabel’ and there will be no matches. Yes the ‘label’ requires a translation object). We’ll also need the button action, which refers to a method that handles what happens when the button is clicked. This is the process I would take to figure out what we need for both the button element and the button action. I suggest you follow these steps yourself, as it will help you understand other issues you’ll encounter. As always, the place we start is with the existing Discourse functionality we want to copy. In this case we start with the button in normal Discourse that opens the new topic compose when it is clicked. 1. Go to `meta.discourse.org` and highlight the Create Topic button with the chrome inspector. You’ll see it has the id `create-topic`. 2. Do a search for `create-topic` in the Discourse code. These are the results you’ll get 3. Click through one of those relevant results and you’ll find button elements in templates that give us much of the information we need. e.g.: 4. If you click that new button, you’ll see a message in the console `createTopic not found`. We need to deal with the second part of the button, the button action. If you’ve read the part of the Ember Guide that covers [Template Actions](https://guides.emberjs.com/v2.3.0/templates/actions/), you’ll know that the action handler we got from one of those templates refers to an action method in a corresponding component, controller or route. So let’s just do a search for that handler and find the corresponding instance. 5. Ok we’ve now found the method. How do we get that method to work for our widget button? If you’ve read [A tour of how the Widget (Virtual DOM) code in Discourse works](https://meta.discourse.org/t/a-tour-of-how-the-widget-virtual-dom-code-in-discourse-works/40347), you’ll know that each action in a widget needs a corresponding action handler in the widget. Ok, so let’s create a `createTopic` method in the profile widget that does the same thing the `createTopic` method in the Discovery Route does. Once you add that new `createTopic` method and reload, your Create Topic button will now (mostly) work like the Create Topic button in the normal Discourse discovery. The composer will open. There are some issues that arise by virtue of the fact that the profile widget can appear in different contexts from the context in which the normal Create Topic button appears. There are other ways to do the same thing we just did, however the key point here is: 1. Start with what you already know. We know that there is a button in normal Discourse that does what we want to do. Start by figuring out how that works. 2. Copy as much as possible. We can copy from both normal Discourse and the existing code in the profile widget that does similar things to what we want to do. Using this approach the answers you get will not be 100% perfect, but they will get you 90% of the way there. Once you’re 90% there you have a much better idea of what the 10% of actual problems you’ll need to figure out are. I have to get back to work now, so I’ll leave those other questions with you for now. Apply the same approach and see if you can figure out the answers. --- _[View the full topic](https://meta.discourse.org/t/layouts-plugin/55208)._