How to Build a vBulletin Powered Mobile Page

vbulletin-powered-mobile-page

For some time now I have wanted to build a mobile vBulletin powered page for my mobile style and I finally succeeded after a few hours of messing around with it. It took a little bit of time, but I hope it helps you out.

Why am I build this mobile page? Well I wanted to make it easier to get mobile users to be able to see a page that had links to all my mobile apps without having to view it on the main forum style since I have set all mobile users to see the mobile style.

1. Create a php page:
- Create a new file, whatever you want to call it (let’s say test.php).
- Open up test.php and add the following (replace TEST with whatever template you want to show – WARNING: the template name is CASE SENSITIVE!!!):

<?php
 
// ####################### SET PHP ENVIRONMENT ###########################
error_reporting(E_ALL & ~E_NOTICE);
 
// #################### DEFINE IMPORTANT CONSTANTS #######################
 
define('THIS_SCRIPT', 'test.php');
define('CSRF_PROTECTION', true);  
// change this depending on your filename
 
// ################### PRE-CACHE TEMPLATES AND DATA ######################
// get special phrase groups
$phrasegroups = array();
 
// get special data templates from the datastore
$specialtemplates = array();
 
// pre-cache templates used by all actions
$globaltemplates = array('Test',
);
 
// pre-cache templates used by specific actions
$actiontemplates = array();
 
// ######################### REQUIRE BACK-END ############################
// if your page is outside of your normal vb forums directory, you should change directories by uncommenting the next line
// chdir ('/path/to/your/forums');
require_once('./global.php');
 
// #######################################################################
// ######################## START MAIN SCRIPT ############################
// #######################################################################
 
$navbits = construct_navbits(array('' => 'Test'));
$navbar = render_navbar_template($navbits);
 
// ###### YOUR CUSTOM CODE GOES HERE #####
$pagetitle = 'Test';
 
// ###### NOW YOUR TEMPLATE IS BEING RENDERED ######
$templater = vB_Template::create('Test');
$templater->register_page_templates();
$templater->register('navbar', $navbar);
$templater->register('pagetitle', $pagetitle);
print_output($templater->render());
 
?>

The above is based on Lynne and Gary’s post over at vBulletin.org on “How to Create Your Own vBulletin Page”, but here we are building it out for vBulletin’s Mobile style.

2. Creating the Template:
- Make sure you create this page in your Mobile Style, not your default or Master Style.
- Open your mobile style and in the dropdown menu choose “Add New Template”
- Add the following in your new template:

{vb:stylevar htmldoctype}
<html xmlns="http://www.w3.org/1999/xhtml"<vb:if condition="$vboptions['enablefacebookconnect']"> xmlns:fb="http://www.facebook.com/2008/fbml"</vb:if> dir="{vb:stylevar textdirection}" lang="{vb:stylevar languagecode}" id="vbulletin_html">
<head>
    {vb:raw headinclude}
    <title>{vb:raw vboptions.bbtitle}</title>
    {vb:raw headinclude_bottom}
</head>
<body>
 
{vb:raw header}
 
{vb:raw navbar}
 
<div id="pagetitle" class="pagetitle ui-bar-b">
    <h1 class="pagetitle">{vb:raw pagetitle}</h1>
</div>
 
 
 
YOUR CONTENT HERE
     

 
{vb:raw footer}
 </body>
</html>

Click for Full Image

A couple things of note:
Make sure that if you already have a normal vB powered page that you name your mobile style page something different as not to override your older page.

Please let me know if you have any questions or you can post in the comments if you need any help.

Why another blog about forums? Great question, we are just a couple of forum owners who have built ours forums from the ground-up. We just wanted a blog for real life forum owners, with real life experiences.

View all contributions by

Get more updates by subscribing

Leave a Comment

  • ?? April 14, 2014, 3:28 am

    I love to disseminate information that I have accumulated with the year
    to help improve group functionality.

    Reply
  • baby jogger stroller April 14, 2014, 2:35 pm

    Good day! I simply would like to give a huge thumbs up for the good info you may have here
    on this post. I will likely be coming back to your weblog for
    more soon.

    Reply
  • ?????? April 15, 2014, 11:12 pm

    I have a keen analytical eyesight pertaining to fine detail and
    can anticipate issues prior to they will take place.

    Reply