vbulliten

Step 1: Create Template

First we'll create a template for the new page: AdminCP -> Styles & Templates -> Style Manager -> choose Style -> Dropdown: Add New Template

• Title: my_cms_test
• Template: As a minimum, the codebox only needs to contain the variable that contains the output of our PHP code. For our example, we'll fill it with the following code:

PHP Code:

This is a custom php page. <br /><br />First URL parameter (a): <vb:if condition="$output['a']">    {vb:raw output.a}<vb:else />    Not present.</vb:if><br /><br />Second URL parameter (b): <vb:if condition="$output['b']">    {vb:raw output.b}<vb:else />    Not present.</vb:if> 


Of course, like with all other templates in vB, you can have all kinds of html code and template conditionals in there.

Step 2: Create Widget and configure

Next we'll create a PHP-Widget: AdminCP -> vBulletin-CMS -> Widgets -> Create New Widget

• Widget Type: PHP Direct Execution
• Title: my_phppage_test

Save, then configure the newly created widget.

• In the main box, you enter your custom PHP code. Note that all output has to be done via variables, meaning: you can't use echo or print. You can use $output to save your output, which is handy, since this variable is auto-registered. Other variables are possible, but need to be registered in the usual way. Our example:

PHP Code:

// clean URL-parameters 
// note how for a only text/numbers (NOHTML) 
// and for b only numbers (UINT) are valid

vB::$vbulletin->input->clean_array_gpc('g', array(
'a' => TYPE_NOHTML,
'b' => TYPE_UINT
));  

// prepare variables for template use. 
// Easiest way to do this in a widget is using $output,
// since this is registered automatically. Of course, 
// you can register other variables, if you like.

$output['a'] = vB::$vbulletin->GPC['a'];
$output['b'] = vB::$vbulletin->GPC['b']; 


For Template Name we use the template we created in Step 1.

Step 3: Create Layout

You may already have a fitting layout, but if this is your first try, probably not: AdminCP -> Layout Manager -> Add New Layout

• Titel: Your choice
• Grid: I have used 1 Column + 240px Sidebar, but you are free to do what you want
• The just created widget gets placed into the main area, under primary content area.
• Then drop some widgets wherever you want them. Save.

Step 4: Create a section for your page

We create a Section to contain - or rather act as - our page. It is necessary to have a seperate section for every different php widget/page you create in this way: AdminCP -> CMS -> Section Manager -> Add New Section

• enter a name
• the other settings are not important atm (remember you need to publish your section sometimes, tho)

Step 5: Go to the Frontend, to the section we just created, configure

• Choose the layout we just crated in step 3.

Step 6: Remove "There is no content in this section

What's disturbing our nice php page now is the forced "There is no content in this section"-message. We'll get rid of this message in one last step - a step we'll hopefully can get rid of in the future
For this, we need to remember the Node-ID of our newly created section. That's the number that can be seen in every form of URL for the sections:

PHP Code:

content.php?r=116-my-phpcontent.php/116-my-php 


Then we go to AdminCP -> Styles & Templates -> Style Manager -> choose Style -> Template: vbcms_content_section_page

In this template, look for:

PHP Code:

    <vb:if condition="$no_results_phrase">    <div class="fullwidth">        <p class="cms_article_txt_content">            {vb:raw no_results_phrase}        </p>    </div>    </vb:if> 


Replace with:

PHP Code:

  <vb:if condition="$nodeid != Node-ID">    <vb:if condition="$no_results_phrase">    <div class="fullwidth">        <p class="cms_article_txt_content">            {vb:raw no_results_phrase}        </p>    </div>    </vb:if>    </vb:if> 


where Node-ID is the number of the Node-ID we just found out above, in this case: 116

If you want to have more than one custom php page, you may want to change the first line of the template edit to:

PHP Code:

    <vb:if condition="!in_array($nodeid,array(Node-ID_1, Node-ID_2, Node-ID_3))"> 


End: Test the page

Who knows to read some PHP will already have figured out what the example code does - there's plenty of comment, after all. Anyway, by adding the parameters a and b to the URL you can test the example's functionality.

More? Advanced stuff

To get rid of the vB-CMS generated Headline, put the whole vbcms_content_section_page template into the conditional from step 6. Then you can control the Heading: move the relevant parts from the original template to your custom one and fill it with variables of your choice.

The code for the headline is the following:

PHP Code:

    <div class="title">    <!-- section page title div -->        <h1 class="header">            <span>{vb:raw title}</span>            <vb:if condition="$can_edit">                <a href="{vb:raw page_url}/edit" class="edit"><img class="editimage" src="{vb:raw vboptions.bburl}/{vb:stylevar imgdir_cms}/edit_small.png" alt="{vb:rawphrase edit}" /></a>            </vb:if>            <vb:if condition="$vboptions['externalrss']">                <a href="ajax.php?do=rss&amp;type=newcontent&amp;sectionid={vb:raw nodeid}&amp;days=120&amp;count=10"><img src="{vb:stylevar imgdir_misc}/rss_40b.png" alt="{vb:rawphrase rss_feed}" /></a>            </vb:if>        </h1>    </div>    <!-- closes section page title div --> 


In there are also the codes for the edit-Button and the RSS-Button. You should integrate the first one into your custom template to be able to edit the section, while the RSS-button is rather useless as far as I can see, since there's no primary content on the page - only our custom php widget.