Assign Pages to Different Tabs

[Arik]

This is an extremely quick mod. Pages always fall under the "Forum" tab and breadcrumbs, but sometimes that may not be what you're looking for.

This mod allows you to assign a navtab to your page, which will be the tab selected when the user follows the link. As a side benefit, the breadcrumbs will also follow your custom navigation.

You assign a navtab by putting its ID within the URL Portion Page configuration, followed by two underscores. In my example attached, I had a navtab with a staff ID, and the URL for my page was staff__page.

The delimiter is configurable, as long as it's a legal character within the URL Option.

You're still responsible for properly creating the navtabs you want active.

Installation is simple. Unzip, upload the contents of the library directory, install the XML file.

 

[Peggy]

aaaaaaaaand I can't wait to try this later. We were just talking about this a few days ago somewhere on the board here.
If this really works - YOU are awesome!

 

[CyberAP]

Can it create sub-tabs?

 

[Arik]

Can it create sub-tabs?

It doesn't create the tabs, you still have to do that. It simply lets you assign pages to a particular tab.

If this really works - YOU are awesome!

Hope you find it useful.

 

[CyberAP]

It doesn't create the tabs, you still have to do that. It simply lets you assign pages to a particular tab.

Ok, I think I got it. Thank you!

 

[Sagar]

I installed it. But not getting how to get it working. Can you elaborate the steps in more details?

This is an extremely quick mod. Pages always fall under the "Forum" tab and breadcrumbs, but sometimes that may not be what you're looking for.

This mod allows you to assign a navtab to your page, which will be the tab selected when the user follows the link. As a side benefit, the breadcrumbs will also follow your custom navigation.

You assign a navtab by putting its ID within the URL Portion Page configuration, followed by two underscores. In my example attached, I had a navtab with a staff ID, and the URL for my page was staff__page.

The delimiter is configurable, as long as it's a legal character within the URL Option.

You're still responsible for properly creating the navtabs you want active.

Installation is simple. Unzip, upload the contents of the library directory, install the XML file.

 

[Arik]

Here's the coded example from the screengrab above:

<?php

class Staff_Listeners_Listeners
{
    public static function navtabs(array &$extraTabs, $selectedTabId)
    {
        $extraTabs['staff'] = array(
            'title' =>  'Staff',
            'href'  =>  'http://localhost/xenforo/index.php?pages/staff__Page/', 
            'selected'  =>  ($selectedTabId == 'staff'),
            'linksTemplate' =>  'Staff_Navtabs'
        );
    }
}

Then I created a Page with the url of staff__Page

 

[Sagar]

Where do I put this? in template? new php file?
Sorry if these questions sound but I don't have any programming background

Here's the coded example from the screengrab above:

<?php

class Staff_Listeners_Listeners
{
    public static function navtabs(array &$extraTabs, $selectedTabId)
    {
        $extraTabs['staff'] = array(
            'title' =>  'Staff',
            'href'  =>  'http://localhost/xenforo/index.php?pages/staff__Page/',
            'selected'  =>  ($selectedTabId == 'staff'),
            'linksTemplate' =>  'Staff_Navtabs'
        );
    }
}

Then I created a Page with the url of staff__Page

 

[Arik]

Where do I put this? in template? new php file?
Sorry if these questions sound but I don't have any programming background

No problem. It's not all that difficult. There's a tutorial here, but here's the long and short of it:

1. Create a new directory under the library folder. In my example, that folder was called "Staff". So, it should look like this:

library/
     Staff/
     XenForo/

(there are a few more directories in there, but this is for example )

2. Under your folder, create another folder. Mine was called "Listeners" Now it looks like this:

library/
     Staff/
          Listeners/
     XenForo/

3. Within the Listeners folder, create a PHP file (mine was called "Listeners.php" and add the following code to it:

<?php  class Staff_Listeners_Listeners
{
     public static function navtabs(array &$extraTabs, $selectedTabId)
     {
         $extraTabs['staff'] = array(
             'title' =>  'Staff',
             'href'  =>  'http://localhost/xenforo/index.php?pages/staff__Page/',
             'selected'  =>  ($selectedTabId == 'staff'),
             'linksTemplate' =>  'Staff_Navtabs'
         );
     }
 }

This is where things get interesting. The line Staff_Listeners_Listeners tells the XenForo autoloader where to find the PHP file (you don't care very much about that, just stick to the convention). All that's important to you is that the first word is the first folder you created, then an underscore and the second folder, then another underscore and the php file, minus the .php extension.

So, if you created the directory library/Foo/Bar/Baz.php, the class line would look like this:

class Foo_Bar_Baz
{

The function can be named anything...when creating navtabs, I like calling it navtabs. However, everything in the parentheses should stay the same.

Modify the $extraTabs array to include references to your navtab. Everything in the title, href, selected, and linksTemplate can be modified. Best practices suggest to use the phrase & links system, but it's certainly not required. As noted above, in the "selected = ($selectedTabId == 'staff')" section, the 'staff' should match what you're calling your page (i.e. staff__Page).

4. Put your board into debug mode. Within the config.php file, add $config['debug'] = true. Probably shouldn't do this on a live board.

5. Create a new Add-On. Put whatever you want in the Add-On ID, name, version string and version ID. Nothing else is required.

6. Create a new Listener:

Listen to Event: navigation_tabs
Execute Callback: Staff_Listeners_Listeners::navtabs
Callback Execution Order: 10 (leave as default)
Description: Whatever you want to describe it as.
Add-On: Select your add on

The callback should have the following form:
class_declaration::function (the "::" separates the two input fields)

Save your listener, and you should be all set!

I've attached the addon I created for my staff tab. Should be a good place to start. Please note, it was never something that I intended to release...it was a quick and dirty move to create an example. Modify and play with it however you want.

Hope that helps.

 

[Sagar]

Thank you so much. Its now working like a charm

 

[Russ]

Late bump , so I got this working but I'm curious as to how I'd approach creating a sub link under this navigation tab I just created using this tutorial. Links to tutorials or a guide would be appreciated ;(

 

[Anthony Parsons]

Template modifications would have a topic on that: http://xenforo.com/community/forums/template-modifications.37/

 

[Arik]

Late bump , so I got this working but I'm curious as to how I'd approach creating a sub link under this navigation tab I just created using this tutorial. Links to tutorials or a guide would be appreciated ;(

The "links template" property tells it what template to use for the navigation. Create that template, and add your links within a "ul".

Should look like this:

<ul class="secondaryContent blockLinksList">
<li><a href="www.google.com">Google</a></li>
<li><a href="www.yahoo.com">Yahoo</a></li>
<li><a href="www.ask.com">Ask</a></li>
<li><a href="www.bing.com">Bing</a></li>
</ul>

 

[Russ]

The "links template" property tells it what template to use for the navigation. Create that template, and add your links within a "ul".

Should look like this:

<ul class="secondaryContent blockLinksList">
<li><a href="www.google.com">Google</a></li>
<li><a href="www.yahoo.com">Yahoo</a></li>
<li><a href="www.ask.com">Ask</a></li>
<li><a href="www.bing.com">Bing</a></li>
</ul>

That was far to easy , thanks Arik.

 

[RS7588]

Great work! I've been waiting for something like this!

 

[DaveL]

Listen to Event: navigation_tabs
Execute Callback: Staff_Listeners_Listeners::navtabs
Callback Execution Order: 10 (leave as default)
Description: Whatever you want to describe it as.
Add-On: Select your add on

For some reason it keeps coming back with "Please enter a valid callback method."

Please help!

Edit - My Mistake - Forgot to upload files before hand!

 

[DaveL]

Ok, got it all installed and its working great, however im hoping someone can help in how I now create the sub links. I dont quite understand the few posts above.

Any help greatly appreciated

 

[DaveL]

To sort the sublinks out I had to have a read of this thread - http://xenforo.com/community/threads/guide-custom-pages-with-navigation-tabs.5406/

Does anyone know to arrange which order the links show on the navbar?

 

[Luciferia]

I'm afraid I think my brain just exploded, I don't understand how to use this/do this at all. :x

 

[Anthony Parsons]

I'm afraid I think my brain just exploded, I don't understand how to use this/do this at all. :x

Took me a little bit to work out as well.

First, install the addon.

Second, follow the steps above: http://xenforo.com/community/threads/assign-pages-to-different-tabs.7006/#post-108064

Its not really a complete mod IMO...

My Suggestions

I think the mod should be adjusted so that it automatically picks up created pages by the template structure every page creates automatically, provides a dropdown to select the page to be assigned to the tab, as well as options for tab placement using the available hooks, to name the tab directly from the options, without having to adjust code, etc.

It would also be easier if it just creates the additional template for adding dropdown links.

That would be a far easier mod than the way this is currently structured... it took me 5 minutes of playing around to work it out myself.