vBulletin LTS

← Back to vBulletin 4 Articles

How to create your own vBulletin 4 sidebar block.
by Dave 01 Feb 2015
Rating: (2 votes - 4.50 average)
It's easier to read this on my blog at https://blog.technidev.com/how-to-create-your-own-vbulletin-4-sidebar-block/.
Let me know if you have any tips/suggestions or need help.

Since I couldn't really find any guide on how to create your own forum sidebar block with custom settings, I decided to write this little guide. It consists of a few things:
- The .php file which takes care of most of the functionality
- The configuration
- Phrases

The main .php file
All of the current blocks are present in the /includes/block/ folder. To make your own block we have to make a new file in this directory. Name it something logical since the filename is dependent of a few things. We are simply going to copy the threads.php file in the /includes/block/ folder. For this guide, I copied the threads.php file to technidev.php. The functionality I will implement is to show the latest x registered users.

Now open the file you just duplicated and change the classname, currently it's "class vB_BlockType_Threads extends vB_BlockType" and we have to rename that to "class vB_BlockType_Technidev extends vB_BlockType".
Say you duplicated the threads.php file to onlineusers.php, you name it to "class vB_BlockType_Onlineusers extends vB_BlockType".

The file consists of a few important things:
- The protected $settings variable. This defines the settings of the block.
- getData function. You should use this to retrieve all of the necessary data.
- getHTML function. This will call the getData function and returns any output.

$settings variable
This will display all of the settings when you want to add a new block in the admincp. For our functionality I want the user to be able to select which usergroup is a "registered" usergroup and how many of the latest users we want to display. That means we have to add 2 settings as follows:

PHP Code:
    protected $settings = array(
        'technidev_usergroupid' => array(
            'defaultvalue' => 2,
            'displayorder' => 1,
            'datatype'     => 'integer'
        ),
        'technidev_amount' => array(
            'defaultvalue' => 5,
            'displayorder' => 2,
            'datatype'     => 'integer'
        )
    ); 

That's how easy it is, the $settings variable is very flexible and you can add many things. All of the settings can be reached with the $this->config array, $this->config['technidev_usergroupid'] for example. But say you want to make a select box where the user will be able to select multiple usergroupid's, you can add an option such as:

PHP Code:
    protected $settings = array(
        'technidev_usergroupids' => array(
            'defaultvalue' => -1,
            'optioncode'   => 'selectmulti:eval
            $uid = $vbulletin->db->query_read("SELECT usergroupid FROM " . TABLE_PREFIX . "usergroup ORDER BY title ASC");
            $options = array();
            while($row = $vbulletin->db->fetch_array($uid)){
                $options[$row[\'id\']] = $row[\'title\'];
            }',
            'displayorder' => 4,
            'datatype'     => 'arrayinteger'
        )
    ); 
This will set $this->config['technidev_usergroupids'] as an array.

Note that if you are an advanced user, check out the includes/adminfunctions_options.php file and the function print_setting_row, you can see which options you can use in that function.

The getData and getHTML function
The getData function will be used to retrieve any data and return an array. In my case I want to retrieve the latest registered users based on the settings which are specified by the user. We can do something such as:

PHP Code:
    public function getData()
    {
        $user = $this->registry->db->query_read("
            SELECT userid, username
            FROM " . TABLE_PREFIX . "user
            WHERE usergroupid = " . $this->config['technidev_usergroupid'] . "
            ORDER BY userid DESC
            LIMIT 0," . $this->config['technidev_amount']);

        $users = array();
        while($row = $this->registry->db->fetch_array($user)){
            $users[] = $row;
        }
        return $users;
    } 

The getHTML function should return the HTML output, in this case we can simply create a template, register variables and return the rendered output. Since we retrieve an array, we can simply register it as a variable to our own block_technidev template and then register the output to a variable for the block_html template.

The getHTML function will look like this:

PHP Code:
    public function getHTML($userarray = false)
    {
        if (!$userarray)
        {
            $userarray = $this->getData();
        }

        if ($userarray)
        {
            $templater = vB_Template::create('block_technidev');
                $templater->register('blockinfo', $this->blockinfo);
                $templater->register('stream', $userarray);
            $block = $templater->render();

            $templater = vB_Template::create('block_html');
                $templater->register('blockinfo', $this->blockinfo);
                $templater->register('content', $block);
            return $templater->render();
        }
    } 

And the template block_technidev will look something like:
PHP Code:
        <ul id="block_activitystream_{vb:raw blockinfo.blockid}" class="blockrow activitystream">
            <vb:each from="stream" key="id" value="item">
                <li class="floatcontainer widget_post_bit">
                    <a href="member.php?{vb:var item.userid}">{vb:var item.username}</a>
                </li>
            </vb:each>
        </ul> 
Phrases
This is a very important thing because if you don't add the required phrases, the block will miss a lot of information such as the setting titles/descriptions and the name of the block itself.
We first add the block phrase:
1. Languages & Phrases -> Phrase Manager -> Add New Phrase
2. Select “Forum Blocks” as the Phrase Type and “vBulletin” as the product
3. Set the varname to blocktype_yourblock, blocktype_technidev in my case.
4. Set the text to your block name. "Technidev Registered Users" in my case and save.

Now we have to register the variables for the settings:
1. Languages & Phrases -> Phrase Manager -> Add New Phrase
2. Select “Forum Blocks Settings” as the Phrase Type and “vBulletin” as the product
3. Set the varname to "setting_technidev_usergroupid_title"
4. Set the text, this is the title of the setting and save.
5. Repeat this but use "setting_technidev_usergroupid_desc" as varname, this will be the description of the setting.

Testing
Now if you did it all right, you should go to Forums & Moderators -> Forum Blocks Manager -> Click at the bottom on "Reload Block Types" -> Now add a new block -> Find the name of your block -> Configure the settings and add it.



I added and configured my block, and I now see this in the sidebar:



It doesn't look fancy, but you get the idea. You can fully customize it to your needs within the template and the .php file.

It's easier to read this on my blog at https://blog.technidev.com/how-to-create-your-own-vbulletin-4-sidebar-block/.
Let me know if you have any tips/suggestions or need help.

vblts.ru supports vBulletin®, 2022-2024