How to list categories in the navbar ?

Benderwan

Hello,

I'm trying to create a new theme for my forum based on Vanilla, but can't figure how to list categories inside a sidebar (Pretty much like what Majestic 4.5 would do), so that users could see them wherever they are on the forum.

What would be the best way to do this, should I edit the core or create a plugin or is there any shortcut ?

Thank you very much

<baris>

You can use the categories widget from nodebb-plugin-widget-essentials.

Benderwan

Is there a way to embedd this widget inside my theme or should I release it separately ? Anyway, thank your for pointing the use of widgets, didn't think about it before.

<baris>

If you are based on vanilla it should already have widget areas like global sidebar where you can place the widget and it will be visible on all pages.

Benderwan

Yes, but is there any way that the plugin would be integrated seamlessly, his code being embedded into the templates of the theme or is it a current limitation ?

<baris>

nodebb-plugin-widget-essentials already comes preinstalled with every nodebb.

Which code are you referring to? Some of the widgets have embedded javascript where some are just rendered server side, since that plugin first began development a long time ago.

Benderwan

I mean instead of having to place the widget through the ACP, being able to place the widget template inside of the templates of the theme, by that way having a better control over what should the plugin display without overriding the default plugin.

Actually I have my template

<aside class="navigation"><div widget-area="navigation-categories"></div></aside>

As well as the widget template

<!-- BEGIN categories -->
	<ul class="categories-list">
		<li>
			<!-- IF !categories.link -->
			<h4><a href="{config.relative_path}/category/{categories.slug}">{categories.name}</a></h4>
			<!-- ELSE -->
			<h4><a href="{categories.link}">{categories.name}</a></h4>
			<!-- ENDIF !categories.link -->
			<p>{categories.descriptionParsed}</p>
		</li>
	</ul>
	<!-- END categories -->

Is there a way to concatenate those ?

<div class="navigation">
<!-- BEGIN categories -->
<ul class="categories-list">
	<li>
		<!-- IF !categories.link -->
		<h4><a href="{config.relative_path}/category/{categories.slug}">{categories.name}</a></h4>
		<!-- ELSE -->
		<h4><a href="{categories.link}">{categories.name}</a></h4>
		<!-- ENDIF !categories.link -->
		<!-- I could edit this part to add Theme specific informations such as icon of the category, ... -->
		<p>{categories.descriptionParsed}</p>
	</li>
</ul>
<!-- END categories -->
</div>

I can embedd the code but the plugin does not work anymore, and I don't know where I should put the javascript code of the widget inside my theme directory.

Actually, widgets are rendered after page load via an API call, but is there a way to embedd them and render them with the page ?

<baris>

There is not way to render the widgets on cold load right now, but it is something we will add once we refactor the widget system.

As for adding the categories to your navbar @psychobunny might have a better idea, maybe you can create a widget area like the ones created in vanilla and then add the widget there.

You can't just insert the widget template in to your header because the data required by the widget is not available there.

Benderwan

Ok, so as for now I should stay using widgets instead of merging everything

Thank you very much for your help