Integrating vBulletin with a WordPress theme

OK, so you have a WordPress blog and are thinking about adding a vBulletin message board to it and want it to appear seamlessly within your WP theme. This post will show you how to do it.

The way you go about accomplishing this is by creating two Plugins under vBulletin. Before we do anything we have to make sure that the Plugin/Hook system is enabled. For this select vBulletin Options under the vBulletin Options from the control panel. Select the Plugin/Hook System option in the select list and make sure its enabled. Once you’ve done that, you’ll need to create a couple plugins. Click on the Add New Plugin option under the Plugins & Products on the left hand side of the control panel. Create a plugin with the Hook Location specified as global_start and the default execution order. Give it the title of WP Header and in the Plugin PHP Code field, write the following:

ob_start();
   include('../path/to/wp-load.php');
   include('../blog/wp-content/themes/sandbox/header.php');
   $wp_header = ob_get_contents();
ob_end_clean();

Now let’s examine what I did here. Bascially, I’m invoking two WordPress PHP files, wp-load.php from the main installation and header.php from my theme’s directory. I capture the content of it in the $wp_header variable which we’ll use later.

Make sure you change the plugin to be active by clicking on the Yes radio button and save the plugin.

Now we’ll create another plugin for the footer. Once again, specify the Hook Location as global_start, give it the title of WP Footer and select the default execution order. In the Plugin PHP Code field write the following:

ob_start();
   include('../blog/wp-content/themes/sandbox/footer.php');
   $wp_footer = ob_get_contents();
ob_end_clean();

In this plugin we’re capturing the theme’s footer.php in the $wp_footer variable.

Now we need to insert the two pieces of data we captured into the vBulletin theme. For that let’s go to Style Manager under the Styles & Templates group in the left control panel. Once there, select Edit Templates from the drop down list which should give you a listing of all the editable files in your theme. Double-click on header from the list and simply add the following line of code as the first line in the file:

$wp_header

Save it and go back to the list of editable files and edit footer. Make sure the following line of code is the last line in the file:

$wp_footer

Save it and you’re done.

Well, almost. Depending on the version of vBulletin you have you might get a PHP error which says something like “sanitize_url function has already been defined”. Check the vBulletin file its happening in, download it and rename both occurrences of the function to something like vb_sanitize_url and now you’re done.

15 Comments

  1. azzx
    Posted July 14, 2009 at 10:50 am | Permalink

    Thanks for the informative post.

    In the case of numerous CSS conflicts, what would you recommend?

  2. Posted July 15, 2009 at 12:05 am | Permalink

    I also seem to have multiple CSS conflicts when I attempt to do this, so vBulletin does not look right.

  3. Posted July 15, 2009 at 5:17 am | Permalink

    You’re probably looking at another CSS for these vBulletin/WordPress pages which override the conflicting classes.

  4. Austin Kalb
    Posted July 16, 2009 at 2:26 pm | Permalink

    I really need help getting your idea implemented. I would like to take it the next step, and “include” WordPress Styles in vBulletin – so the pages look the “same”. How about a little help? I can pay if you like…

    Thanks!
    Austin

  5. BlueHornet
    Posted July 18, 2009 at 12:42 am | Permalink

    What’s up, is there anybody else here?
    If it’s not just all bots here, let me know. I’m looking to network
    Oh, and yes I’m a real person LOL.

    See ya,

  6. Todd
    Posted July 19, 2009 at 4:34 pm | Permalink

    Blue Hornet,

    Do you have the solution to this problem? I’m a real person trying to figure out exactly what Austin post abvove is looking to do.

    That is to figure out how to intergrate the same menu and header on my Vbulliten forum pages as on my WordPress Blog pages.

    Can you help?

    Thanks

  7. brandon
    Posted July 30, 2009 at 5:16 pm | Permalink

    this works as far as the style and looks perfect for me, but it makes vbulletin have a blank white page when i click “new thread”. I disable the plugin and newthread works. any ideas?

  8. Posted August 1, 2009 at 3:38 pm | Permalink

    Turn PHP debugging on and see what the error is.

  9. iTouchTW
    Posted August 7, 2009 at 11:51 am | Permalink

    I have same problem with click “new thread ”

    so I check php debugging.

    I think it happens because the different string definition.

    this is what php debugging found:

    in wordpress:

    function sanitize_url( $url, $protocols = null ) {
    return clean_url( $url, $protocols, ‘db’ );
    }

    in vbulletin:

    function sanitize_url($type, $url, $delimiter = ‘\\”‘)
    {
    static $find, $replace;
    if (!is_array($find))
    {
    $find = array(”, ‘\\”‘);
    $replace = array(‘<’, ‘>’, ‘”‘);
    }

    $delimiter = str_replace(‘\\”‘, ‘”‘, $delimiter);

    return str_replace(‘\\”‘, ‘”‘, $type) . ‘=’ . $delimiter . str_replace($find, $replace, $url) . $delimiter;
    }

    anyone know how to fix it?

  10. Arsenalist
    Posted August 7, 2009 at 5:17 pm | Permalink

    iTouchTW – read the last paragraph in the blog entry.

  11. iTouchTW
    Posted August 7, 2009 at 8:58 pm | Permalink

    I got it and works now,

    But when I rename it like “vb_sanitize_url “, I can’t post any more.

    I click “insert image” button, and paste the picture link. It looks good in editing mode, so I submit it.

    After submit it, iT displays wrong as “http://imgsrc\”http://www.itouchtw.com/forums/attachment.php?attachmentid=3&stc=1&thumb=1&d=1249649306\”> ”

    I guess the code changed because of rename. If you can’t understand what I mean, check it out here:http://www.itouchtw.com/forums/showthread.php?t=7

    do you know how to fix this?

    Thank you for your help so much!

  12. iTouchTW
    Posted August 8, 2009 at 9:24 am | Permalink

    update:
    I fix ename both occurrences of the function to like vb_sanitize_url.

    but it still shows problem:
    I post, the program code is

    but I think It should be

    how could I fix it?

    Thank you so much

  13. Avaindnip
    Posted October 1, 2009 at 4:36 pm | Permalink

    Hi

    I’ve looked a trailer for the “2012″. I was interested in this theme.
    Please advise me a good site on this topic.
    And what do you think about the end of the world 2012.

    Thanks.

  14. Posted October 6, 2009 at 5:19 pm | Permalink

    If you are having CSS conflicts you need to grab all the css properties for the header/footer and put something like #arras-vb at the start of each property. e.g.

    #arras-vb td {

    }

    then wrap the footer in a div

    $wp_footer

    it’s rather time consuming and i’m still having some problems getting it working but it does work eventually.

  15. SoundJohn
    Posted November 21, 2009 at 10:27 pm | Permalink

    Hey! Thanx for this beautiful place of the Inet!!


Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*