Create a custom PHP page in vB-CMS

[cellarius]

.
.
What is this How-To about?

Goal is to integrate a custom PHP page into the CMS with which - as far as I can tell - one can achieve most (or even all) things that were possible by creating a custom page for the old forums. This is not as easy as it could be, but it can be done. I will use the custom PHP-Widget for this.

vB-Version

This was written for vB 4.0.2.

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:

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:

// 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 (hint to devs )

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:

content.php?r=[COLOR=red]116[/COLOR]-my-php
content.php/[COLOR=red]116[/COLOR]-my-php

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

In this template, look for:

    <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:

    <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:

    <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.

http://www.deinforum.de/content.php/113-php-test?a=parameterinhalt&b=123

This leads to the following:

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:

    <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.