Feature
Post

Category
Code


Customizing Vanilla

Since the recent launch of the Devlounge forums*, I have been receiving countless emails and requests asking me how I integrated WordPress and Vanilla. I decided what better way to get the word out then provide a quick instructional guide on how to do such a thing.

Devlounge Forums

What is Vanilla

For those of you that don’t know about Vanilla, you’re missing out on a great thing. In a world were (good) free forum software has almost became non-existent, Vanilla steps up and shows its strengths. The great thing about Vanilla is how easily extensible it is, and how straight forward, clean, and compact (the download is under 400kb!).

Understanding the skin system

Like most forum scripts, Vanilla support multiple styles (or skins, themes, whatever you’d like to call them). These styles can be selected from the admin panel, and changed on a site wide basis.

The difference of Vanilla is its use of one group of centralized files. These files are used with every theme, and theme colors and layout are controlled by individual stylesheets, rather than a group of template files with each theme.

For example, after you download Vanilla, you will see a “themes” folder. Inside, you’ll find a folder called vanilla and a bunch of different vanilla based template files. Take special note of head.php, foot.php, and panel.php. These are the three main files we will be editing.

If you continue into the Vanilla folder, you’ll find a folder inside called styles, which then leads to more folders, in this case after a fresh download, default. You besides a whole bunch of folders, who do you customize this baby?

The concept is actually a lot easier then it appears. Vanilla is all about organization, which is why even a themes folder is broken down into so many sub-folders. There are two sets of ways to customize different aspects of vanilla:

CSS Customizing Only

  • Copy the “default” folder and rename the copy to something else, say “myskin”.
  • Now, it is safe for you to edit all the css and images. Keep in mind that Vanilla will use this skin on it’s default group of template files, so the css tweaks do have their limitations depending on what you want to accomplish.

Template & CSS:

  • Copy the “vanilla” folder found inside “…/themes”. Rename the new folder to something, say “mytheme”.
  • Now that you’ve created a copy of the vanilla folder and all it’s content, you are now safe to go ahead and customize both the template files found inside and the stylesheets used for the theme.
  • The main files you will find yourself using to get the theme to match your site are head.php, foot.php, and panel.php.
  • Once you customize a template file, upload it to the newly created theme folder, such as “mytheme”. Vanilla checks to see if any template files exist inside a theme folder, and if they don’t, it uses the base template files.

Integrating Vanilla & WordPress

One thing to make clear here, Vanilla & WordPress are not fully integrated, it is simply the design. In the future, there will probably be a way to integrate WordPress & Vanilla fully, included users.

Anyways, how did I get vanilla to match devlounge? Let’s first open up the head.php in our “…/themes” folder and in our current WordPress themes folder (header.php).

Upon opening Vanilla’s head.php, down towards the end (lines 31-35), you’ll see some php with references to “body”. This is where vanilla is calling style information for the sites body, and where Vanilla will begin.

In our case, here we wanted to wrap the forum script with our sites background, as well as include the logo, header, and site navigation. A quick switch to the wordpress header.php, and look below the body tag, and the code we saw looked like this:

<div id="wrapper">
<div id="logo" onclick="location.href='http://www.devlounge.net/';"></div>
<div style="clear: both"></div>
  <div id="header"><img src="urlhere" alt="Devlounge" /></div>
<div style="clear: both"></div>
  <div id="nav">
      <a href="http://www.devlounge.net">Home</a>
      <a href="http://www.devlounge.net/about">About</a>
      <a href="http://www.devlounge.net/articles">Articles</a>
      <a href="http://www.devlounge.net/interviews">Interviews</a>
      <a href="http://www.devlounge.net/features">Features</a>
      <a href="http://www.devlounge.net/forum">Community</a>
<a href="http://www.devlounge.net/feedcenter">Subscribe</a>
      <a href="http://www.devlounge.net/contact">Contact</a>
  </div>

To give the board the same width as a header, we added a new css class and inserted it just below the code above, along with a div clear just to be on the same side. Back to Vanilla’s head.php, we added everything above right below the last line of head.php. It looked like this: (the first few lines are the last lines of Vanilla’s head.php.)

$BodyId = "";
if ($this->BodyId != "") $BodyId = ' id="'.$this->BodyId.'"';
echo $HeadString . '</head>
   <body'.$BodyId.' '.$this->Context->BodyAttributes.'>';
?>
<!-- Begin Site Integration -->
<div id="wrapper">
<div id="logo" onclick="location.href='http://www.devlounge.net/forum';"></div>
<div style="clear: both"></div>
  <div id="header">
<img src="urlhere" alt="Devlounge" />
    </div>
<div style="clear: both"></div>
  <div id="nav">
      <a href="http://www.devlounge.net">Home</a>
      <a href="http://www.devlounge.net/about">About</a>
      <a href="http://www.devlounge.net/articles">Articles</a>
<a href="http://www.devlounge.net/interviews">Interviews</a>
<a href="http://www.devlounge.net/features">Features</a>
      <a href="http://www.devlounge.net/forum">Community</a>
<a href="http://www.devlounge.net/feedcenter">Subscribe</a>
      <a href="http://www.devlounge.net/contact">Contact</a>
  </div>
  <div style="clear: both"></div>
<div id="theboard">

Now we needed to open Vanilla’s foot.php to close our two open divs, the div “wrap” and “theboard” div. Once you open the foot.php file, you’ll notice there is no reference to the end body and html tags. These are included in page_end.php, which we’ll leave untouched. To close off the two open tags we had, we added this to the very end of foot.php:

<div style="clear: both"></div>
<div id="feed"><span class="icon">Keep your feedreader happy. <a href="http://feeds.feedburner.com/Devlounge">Subscribe now to our site feeds</a> or visit our <a href="http://www.devlounge.net/feedcenter">feed center</a>!</span></div>
<div style="clear: both"></div>
  <div id="footer">
   The Devlounge forums - A beautiful combination of Devlounge and Vanilla, creating the tastiest treat around.
</div>
<!-- Close off Wrap & Main Div -->
</div>
</div>

Once we had this all taken care of, the devlounge forums were now matching the site, making it seem like everything was perfectly integrated. One thing you have to remember is to insert whatever css you need for your site into the vanilla.css for whatever theme you’re using. You can also take this one step farther and customize the people.php to match your site, as we did. This makes registering also match your sites interface.

This doesn’t have to be just for integrating Vanilla and WordPress either. By following the same basic rules, you can edit Vanilla to match your site as long as you have basic code and css knowledge. Hopefully this guide is useful in the customization process. Please use the comments for any questions, comments, or thoughts on this guide you may have, or some of your own customizing tips.

* Note: As of August 15th, the Devlounge Community was removed to allow expansion before we pick up with a community again. This guide is still accurate and current.


  1. By z3rb posted on July 28, 2006 at 7:34 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    It’s at times like this i wish i had a use for Vanilla :P

  2. By Blake Cannell posted on July 28, 2006 at 9:36 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Ahh great, thanks alot.

  3. By G posted on July 30, 2006 at 8:49 am
    Want an avatar? Get a gravatar! • You can link to this comment

    How do I target everything, directory wise? I currently have it like this:

    root
    –vanilla
    –wordpress

    I did everything per the instructions but no luck because the wordpress header has some php stuff that when I put it in the vanilla head.php, it cant render it. How does getting vanilla to be thin like my wordpress page really work?

  4. By aj posted on July 30, 2006 at 8:56 am
    Want an avatar? Get a gravatar! • You can link to this comment

    First things first, not everything from vanilla header.php has to go inside’s vanilla’s. Register on the forums and create a new thread with your header code, I’ll help you out with what to put where :).

  5. By Mark O'Sullivan posted on August 1, 2006 at 3:33 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Great tutorial!

    I should also mention that it is possible to accomplish this without creating a new theme at all.

    If you are a really savvy developer and you read the documentation (lussumo.com/docs) you will find that you can create your own page controls and add them to the page wherever you want. These controls can contain the code you have above and be placed anywhere in the page – like below vanilla’s head template and above Vanilla’s foot template.

    This way you won’t have to worry about concurrency issues when Vanilla is next upgraded. You can just turn your style integrations on and off as an extension.

    Check out how we got the banner above the community forum at lussumo.com/community using this method in the documentation, here:

    http://lussumo.com/docs/doku.php?id=vanilla:administrators:troubleshooting#theme_changes

  6. By aj posted on August 1, 2006 at 3:55 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks Mark :)

  7. By EJ posted on August 3, 2006 at 7:54 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Sweet! Gonna give this a try! Also gonna sign up on the forums: I’m sure there’s good tips and hints in there to soak up. :)

  8. By Jim posted on September 7, 2006 at 11:23 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I’m trying to get your procedure to work, but I am stuck at one point. I believe I got everything I needed copied into the head.php file. When I tried to use Vanilla, it gave an error on an undefined function have_posts(). Then I realised you need to add the call to wp-blog-header. I put that in, but now get “call to member function hide_errors() in wordpress/wp-includes/cache.php”. Can you help?
    Thanks, jim

  9. By AMS posted on September 11, 2006 at 11:44 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Did I misunderstand, or is the integrated area now removed? I’m trying to SEE what you did, to find out if it’s what I’m looking for, but I can’t seem to identify Vanilla here anywhere.

  10. By aj posted on September 12, 2006 at 6:42 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Read the very last note, it explains why the forums were removed.

  11. By nolawi posted on September 29, 2006 at 12:55 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Soemthing to think about… where is the forum so I can see it

  12. By aj posted on September 29, 2006 at 2:20 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    If you read the note at the end of the article, the community was removed in lack of few participants. You can see the end result at my flickr page

  13. By jeriel posted on October 8, 2006 at 9:28 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I would like to know how to add Vanilla Forum at WP?

  14. By Rob posted on January 19, 2008 at 10:23 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks very much :)
    Pity you got rid of the forums though, all I’ve got to go off is the screenshot at the top of the article :(

  15. By Donor Man posted on July 3, 2009 at 5:20 am
    Want an avatar? Get a gravatar! • You can link to this comment

    thanks for that, it was just what i was looking for

  16. TrackbackIntegrating a Forum with WordPress | blogHelperChrisLegend.net » Blog Archive » links for 2006-09-20Apreche.net » links for 2006-09-20整合论坛到Wordpress at Where Lucifer fallsskriban.com » Blog Archive » Forum Integration in WordpressRavi UdeshiIntegrating a Forum with WordPress | 4uwebcash.com整合论坛到Wordpress » Crescent整合论坛到Wordpress | 站长工具箱bbPress mit Vanilla Forum ablösen整合论坛到Wordpress | 窝棚-WPCMSDeamonic Angel’s Home » Blog Archive » Integrating a Forum with WordPressEzrix » Blog Archive » Integrating Vanilla Forum Into Wordpress