XF 1.4 How to Create a New Tab

[Amaury]

So I know how to add links to existing tabs, but I don't know how to make new tabs entirely. I know I'd add it to the navigation template with a similar code to the other tabs, such as Members, but that's about it.

Spoiler: Members Tab Code

<xen:if is="{$tabs.members}">
            <li class="navTab members {xen:if $tabs.members.selected, 'selected', 'Popup PopupControl PopupClosed'}">
         
                <a href="{$tabs.members.href}" class="navLink">{$tabs.members.title}</a>
                <a href="{$tabs.members.href}" class="SplitCtrl" rel="Menu"></a>
             
                <div class="{xen:if {$tabs.members.selected}, 'tabLinks', 'Menu JsOnly tabMenu'} membersTabLinks">
                    <div class="primaryContent menuHeader">
                        <h3>{$tabs.members.title}</h3>
                        <div class="muted">{xen:phrase quick_links}</div>
                    </div>
                    <ul class="secondaryContent blockLinksList">
                    <xen:hook name="navigation_tabs_members">
                        <li><a href="{xen:link members}">{xen:phrase notable_members}</a></li>
                        <xen:if is="{$xenOptions.enableMemberList}"><li><a href="{xen:link members/list}">{xen:phrase registered_members}</a></li></xen:if>
                        <li><a href="{xen:link online}">{xen:phrase current_visitors}</a></li>
                        <xen:if is="{$xenOptions.enableNewsFeed}"><li><a href="{xen:link recent-activity}">{xen:phrase recent_activity}</a></li></xen:if>
                        <xen:if is="{$canViewProfilePosts}"><li><a href="{xen:link find-new/profile-posts}">{xen:phrase new_profile_posts}</a></li></xen:if>
                    </xen:hook>
                    </ul>
                </div>
            </li>
        </xen:if>

Anyway, I've just finished rearranging the Forum tab and want to create a new tab called Community and include Forum Rules, Radio, and Social Groups in it. I know Jake has Nodes as Tabs, which is installed, but that just adds tabs to the navigation.

 

[rainmotorsports]

Nodes as tabs does drop downs as well best I remember. I don't like using it but its no worse than the alternative. You can always make the simplest addon. Its about 1 line of code to make a an extratab and then point it to a template containing the links.

I can paste you over an example later if no one else gets to it.

 

[rainmotorsports]

Alright so with Nodes As Tabs you should be able to create some link nodes that are hidden and then add them to a tab you made. I am a bit fuzzy on the instructions but pay attention to the descriptions in the settings when editing the link nodes.

If your looking for a bit more control there is always *******s addon for $15 - https://*******.com/resources/extra-navigation-menu.96/

Making an addon instead:
Anyways adding a nav tab via making your own addon is a 1 file deal. Its pretty easy. To get started you will need to put a board into debug mode, either your live board or if you have a dev board even better. If you are not familiar with adding this to your config (which is nice since you can whitelist an IP) then use this addon. Dont forget to turn debug off when you are done - https://xenforo.com/community/resources/enable-debug-mode-from-admincp.1356/

Your PHP File
You won't need the PHP file until the second or so step but lets go ahead and get this out of the way.

You will want to make a folder in library. This will also be your class name. For this example I am going to use MaruMenu. Our listener will be Listener.php so our class name for this is MaruMenu_Listener. The function name can be customized. For this I am using addNavTab

Using any decent text editor (using notepad++) create Listener.php and use this as your template:

<?php

class MaruMenu_Listener
{
    public static function addNavTab(array & $extraTabs, $selectedTabId)
    {
                $extraTabs['mynavmenu1'] = array(
                    'title' => 'Title',
                    'href' => 'javascript://',
                    'linksTemplate' => 'MaruMenu_MyNavMenu1',
                    'position'  =>  'end'
                );           
    }
}

Adjust the class name if your using a different folder name. The linksTemplate will also be changed to whatever template you make later in this tutorial. The href url can be set as a URL. I am using a null link since mine is a pure drop down. Don't forget to set a title.

You will need to upload the file to the newly created directory in the library folder so the full path and filename in this example is now /library/MaruMenu/Listener.php

Creating your addon
In the control panel go to development and create addon. Fill it out like the picture and save. What you make here is not critical just remember it:


Adding your listener
Under development again go to Code Event Listeners and the button in the upper right Create New Code Event Listener. The code event we want to listen to is navigation_tabs. Enter your class name and then function so in this case MaruMenu_Listener and addNavTab. Under addon select the name of the addon you created earlier.


Final Step: Make a template
Go to appearance and Templates. Do this under Master Style which is only available in debug mode, careful to not edit templates that aren't for your addon. Create a new template. Use whatever name you specified in your PHP for the template. Make sure to select your addon which is a new drop down you may have never seen before.

Template Example:

<ul class="secondaryContent blockLinksList">
<li><a href="http://www.example.com/link1" target="_blank">Link 1</a></li>
<li><a href="http://www.example.com/link1" target="_blank">Link 2</a></li>
<li><a href="http://www.example.com/link1" target="_blank">Link 3</a></li>
</ul>

Image Example:


Congrats you just created a navtab plugin... a bit crude at that:

 

[rainmotorsports]

I forgot to mention the positon is controlled by 2 things. In the PHP file you can do Home Middle End and then within those 3 the code event listener controls when this is executed. Change from 10 to a higher number to go further to the end of those 3 positions. Can try a lower number to get ahead of other tabs in those 3 positions. Thats how real addon's work to position tabs. Its a bit different than making it purely out of html.

Links added to the Master Style template will show in all themes. If you add links in one theme only it will only show in that theme. Which is why a real plugin wouldn't rely on adding links to templates. But this manual method may be acceptable to you for the moment.

 

[Amaury]

So we figured out how to do it with Nodes as Tabs, but in the end, I just rephrased Members to Community and added the links there.

My next question is how do I make a tab be selected when viewing the custom links I added? When viewing Help Index or Contact Us, it looks like this:



And when viewing Forum Rules, Radio, and Social Groups, the Forum tab is selected instead of Community:



Thanks in advance!

 

[rainmotorsports]

I would check if either of the options in Options > Nodes as Tabs relating to Enable Tab Selection do what you want. I am not sure that it will most of the time but its worth a shot.

 

[Amaury]

I would check if either of the options in Options > Nodes as Tabs relating to Enable Tab Selection do what you want. I am not sure that it will most of the time but its worth a shot.

Those nodes aren't tabs anymore, though, with the add-on, they're just standard XenForo page and category nodes.

 

[rainmotorsports]

Oops well in that case you're just screwed. Best I understand it would have to be done in code. Might be possible to have an addon that causes a tab to be selected when viewing a particular route.