In this screencast we'll actually dig into the code of the Forums area.

The "main" file of the forums, if there is such a thing, is default.master.php. It's a bit like index.php in a WordPress theme, except literally every view in Vanilla uses it whereas some views in WordPress don't use index.php.

To make things as consistant as we can, we're going to go line-by-line through the documents comparing it to the WordPress equivalents. We make our way through the head making sure we have all what we need in there, including linking up the correct global CSS and all that.

We make our way down, ripping out HTML that we wouldn't write ourselves but have come along for the ride so far. This is a bit nerve wracking as sometimes ID's are used as JavaScript hooks in an application like this so who knows exactly what we might break. We make the decision to rip things out and write it how we ideally would and if it causes problems we'll revisit it and fix it. For the record, this ultimately does happen but it was fixable.

We make it down to the footer and decide that including analytics to the bottom would be best served by making the analytics code into a file we can include both on the blog and the forums (a "partial" as most languages call it). We run into some big problems while trying to include the file and go through tons of troubleshooting steps to fix it. It's probably an annoying journey for some folks who see the problem right away, but might be interesting to people who like to see troubleshooting at work. It turns out to be a dumb little problem where the include had a WordPress-specific function in it that of course Vanilla doesn't understand. We figure it out finally by checking MAMP's PHP error log.

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.