Enable 'New Topic' Button for Non-Logged-In Users on Discourse

By default, "New Topic" button on discourse is only visible to logged-in users. When clicked by a guest user, it will prompt them to sign up. This guide will show you how to create a "New Topic" button for non-logged-in users.

Disclaimer: This solution was developed with significant help from Claude (Anthropic's AI). While the code works, I don't fully understand all the technical details of why it works. If you're a developer who can explain this better, please feel free to contact me to help improve upon this guide!

The Solution

Step 1: Add JavaScript Code

In your Discourse admin panel:

 1. Go to Appearance → Components
 2. Install → + Create New
 3. Add this code to the Body section of your Component:

(function() {
  const { api } = require("discourse/lib/plugin-api");
  const { withPluginApi } = require("discourse/lib/plugin-api");

  withPluginApi("0.8", api => {
    const addNewTopicButton = () => {
      // Check if user is logged in
      if (Discourse.User.current()) {
        return; // Exit if user is logged in
      }
      
      const navContainer = document.querySelector('.navigation-container');
      if (!navContainer) return;
      
      // Create button if it doesn't exist already
      if (!document.querySelector('.guest-new-topic-button')) {
        const button = document.createElement('button');
        button.className = 'btn btn-icon-text btn-default guest-new-topic-button';
        
        button.innerHTML = `
          <svg class="fa d-icon d-icon-plus svg-icon svg-string" xmlns="http://www.w3.org/2000/svg">
            <use href="#plus"></use>
          </svg>
          <span class="d-button-label">New Topic</span>
        `;
        
        // Add click handler to open signup modal
        button.addEventListener('click', () => {
          const authButton = document.querySelector('.sign-up-button');
          if (authButton) {
            authButton.click();
          }
        });
        
        navContainer.appendChild(button);
      }
    };

    api.onPageChange(() => {
      setTimeout(addNewTopicButton, 100);
    });
    
    api.onAppEvent('page:changed', () => {
      setTimeout(addNewTopicButton, 100);
    });
  });
})();



Step 2: Add the CSS

Add this CSS to your theme's Stylesheet section:

.guest-new-topic-button {
    color: var(--secondary);
    background: var(--tertiary);
    transition: all .3s linear;
    border-radius: var(--mint-border-radius);
    text-transform: uppercase;
    border: 2px solid var(--tertiary);
    margin-left: 1em;
    height: 38px !important;
    min-height: 38px !important;
    padding: 3px 12px !important;
    line-height: 1 !important;
}

.guest-new-topic-button:hover {
    background: color-mix(in srgb, var(--tertiary) 85%, black) !important;
    border-color: color-mix(in srgb, var(--tertiary) 85%, black) !important;
}

.guest-new-topic-button .d-icon {
    font-size: 0.8em;
    margin-right: 4px;
}

.guest-new-topic-button .d-button-label {
    font-size: 0.9em;
}

What This Does

 1. Shows a "New Topic" button to non-logged-in users
 2. Matches the style of the regular "New Topic" button
 3. Opens the signup modal when clicked
 4. Persists across page navigation
 5. Only appears for guests (non-logged-in users)


Troubleshooting

If the button doesn't appear:

 * Verify you added the code to the Body section
 * Test while logged out
 * Clear your browser cache and reload
 * Make sure you're not running other themes that might conflict


Background
Forums are not common as they used to be, most users do not know how to participate. Showing them a button while not logged in, allows them to know how to post. Finding how to create this button was a bit difficult for me because Discourse's documentation doesn't cover this specific use case, and there weren't any resources available online about this specific customization. Hence, this guide.


Need Help?

If you run into issues or need to customize the button further, the Discourse community forums are a great place to ask for help. Remember to share any improvements you discover to help others!