Objective:
I will teach you how to add a new sidebar with a custom content in the forum list page.
This is the final result:
I strongly recommend you to read my others tutorials to know better how XenForo works:
- Creating a add-on to insert tabs in profile page (using hooks)
- Creating a add-on to insert tabs in profile page (using hooks) - Part 2
- Creating a add-on to insert tabs in profile page (using hooks) - Part 3
- Creating a add-on to insert tabs in profile page (using hooks) - Part 4
- Creating a add-on to insert tabs in profile page (using hooks) - Part 5
- How to create your own helpers
- How to read and write into the database (with a page)
- How to create a Cron Entry to move threads (with options!)
- How to use tabs to separate your add-on options
- How to show a forum in a page
- How to show a post in a page
This tutorial consists in 4 steps:
Step 1 - Creating the Add-on
Step 2 - The template
Step 3 - Where do I insert the sidebar?
Step 4 - The listener
Step 1 - Creating the Add-on
First we need to create a new add-on. This is a very simple step. To be able to create you need to be in Debug Mode. You can see how to put your forum in Debug Mode in this link
To create a new add-on go to AdminCP -> Home -> List Add-ons and click in the button Create Add-on. In the following screen you need to fill those fields to create the add-on. Use the info below:
- Add-on ID: NewSidebar
- Title: Tutorial New Sidebar
- Add-on is active: Checked
- Version String: 1.0.0
- Version ID: 1
Click Save Add-on and your add-on is created!
Before continue, let's create our folder and the necessary file. Go to your_xenforo_root/libraryand create a new folder naming it to NewSidebar. Inside this new created folder, create a file called: Listener.php.
Step 2 - The template
We need now to create the template that will hold our content to be shown in the sidebar. You can put whatever you want in the template, but for this tutorial we'll just output a simple text "Hello World".
To create a new template (will be used in our new sidebar) go to AdminCP -> Appearance -> Templates and hit the + Create new Template button.
You can copy and paste in the template editor the following code:
Template name: newsidebar_sidebar
Contents:
Code:
<div class="section">
<div class="secondaryContent">
<div class="visitorText">
<h3>Our new Sidebar!</h3>
<div class="stats">
Hello World!
</div>
</div>
</div>
</div>Save. Done, our template is ready to be used in the sidebar.
Step 3 - Where do I insert the sidebar?
XenForo works with template hooks. If you are not familiar with this system, take a look at thisvideo tutorial made by Kier.
After seeing the video, you are now familiar with the system (I guess!). So, we need to find which hook we will use to insert our sidebar right after the default XenForo sidebar in the forum list page.
Do to that, we need to take a look at the template forum_list, which is the template of the forum list page. You can search for it going to AdminCP -> Appearance -> Search Templates and in the box Title Contains fill with this: forum_list and search.
You'll be presented with only one result, which is the template we're looking for. Open the template and take a look at the code. Se if you find any template hooks.
(take your time)
....
Ok! Found? I've found what we want:
Rich (BB code):
<xen:hook name="forum_list_sidebar">See...this is the hook right before the forum list sidebar starts. So, we will use an event listener to insert some custom content in there. Please, take a note of the hook name (in bold) we will use it later.
You can write down in your notepad or something or just consult back this tutorial.
Step 4 - The listener
To create a new code event listener go to AdminCP -> Development -> Code Event Listenersand hit the + Create New Code Event Listener button and you will get this:
Fill with the following information:
- Listen to event: template_hook
- Execute CallBack: do not fill anything, we'll create one
- Callback Execution Order:: 10
- Enable Callback Execution: checked
- Description:: New Sidebar Tutorial
- Add-on: Tutorial New Sidebar
Leave the Code Event Listener page OPEN and let's create our callback class.
Remember in the begining of this tutorial that we've create a folder and a file? So, you have to go there and open the Listener.php file.
If you don't remember it is in: xenforo_root/library/NewSidebar. File opened, paste the following code:
PHP:
<?php
/**
* This is our callback class.
* We must define a callback class to be used in the code event listener.
*/
class NewSidebar_Listener
{
/**
* This is our callback method. It uses 4 params. This method will check if the current requested hook is what we want ('forum_list_sidebar')
* and if it is, we will insert in the contents our template. This way we will have a sidebar right after the XenForo default sidebar.
*
*/
public static function templateHook($hookName, &$contents, array $hookParams, XenForo_Template_Abstract $template)
{
/* If this hook is what we want! Remember: we have found the hook name when we was looking in the forum_list template! */
if ($hookName == 'forum_list_sidebar')
{
/* Insert our template in the contents. This way our sidebar will be inserted right after the last XenForo sidebar in the forum list page */
$contents .= $template->create('newsidebar_sidebar');
/* If you want that our sidebar be BEFORE the XenForo sidebars uncomment the following line (don't forget to comment the line above) */
//$contents = $template->create('newsidebar_sidebar') . $contents;
}
}
}(please, take a look at the comments, all code is explained in there, it is important to you know what you are doing)
Ok. We have now our callback class and callback method:
Code:
NewSidebar_Listener::templateHookGo back to the page where you were before. The code event listeners page. If you have let the page opened you will may have this:
So, now, fill the Execute Callback with the information you've got:
Class: NewSidebar_Listener
Method: templateHook
Save it! (no errors should appear now!)
Go now to your forum list page when your result will be this:
