<img height="1" width="1" style="display:none" src="https://q.quora.com/_/ad/10b616b60fad4a51aa023ade12476783/pixel?tag=ViewContent&amp;noscript=1">

[Product Post] Theme Tip: If Statements and Variables

Posted by Adrian Speyer on Nov 14, 2014 9:12:17 AM
Find me on:

3 minute read

A Vanilla Forums theme is highly flexible. One way you can take advantage of this can be by using if statements and variables. In the past we covered how this can be used with pockets, but we'd like to dig a bit deeper. Please note, what will follow is very powerful and you should not attempt this unless you are comfortable with editing code. Improper use can cause your forum to have issues, so please tread carefully.

What is an "If Statement"?

An "If Statement" allows you to effect a change on content using a condition. So for example, if you are on the homepage, you want something to occur. You can also make it do the opposite. You would add this to your customize theme in your Vanilla Forums dashboard using {if} {/if}.

What "If Statements" are available?

There is an endless number of statements available for you. For example, you have access to these variables:

  • $Discussion - Is the variable for the discussion and comments page, as well as the edit discussion page.
  • $Discussions - Is the variable for recent discussions page.
  • $Category - Is the variable for the category pages.
  • $Categories - Is the variable for the main category page list and any category pages.
  • $Comments - Is the variable for discussions that only have comments.
  • $Profile - Is the variable for Profile page.

(NB: We will not focus on this, but you would use {if $Variable} CODE{/if} to make changes in these more global contexts)

If you are not familiar with Vanilla, or you wish to ensure to ensure you code affects a specific page, it is recommended to use body variables. Below are just some of the variables available:

  • vanilla_categories_index
  • vanilla_discussions_index
  • vanilla_discussion_index
  • vanilla_discussions_mine
  • vanilla_drafts_index
  • vanilla_post_edit discussion
  • vanilla_post_discussion
  • conversations_messages_all
  • conversations_messages_index
  • dashboard_activity_index
  • dashboard_profile_notifications
  • dashboard_profile_discussions
  • dashboard_profile_comments
  • dashboard_profile_edit
  • dashboard_search_index
  • dashboard_entry_register
  • dashboard_entry_signin

You can get the information yourself by using {debug} in your theme on the HTML tab of the customize theme menu item. As you load each page, you will get a handy popup with information. Go to the page on your forum you would like to know the variable for and search for $BodyID.

Smarty_Debug_Console

This is the variable you will want. Also make sure you only do this when your site is not live, as not to confuse your visitors. You can also comment out the pop-up for later use by using asterisks, like so {* debug*}.

How to use Variables with "If Statements" ?

The next step is to make changes in your customize theme section of your dashboard in the HTML tab. Remember you can always go back to an earlier revision, if needed. Now that you have the correct variable identified (as noted above), insert it where the word "variable" is in the following code.

{if $BodyID =='variable'}
HTML, JavaScript or CSS
{/if}

When you add the JavaScript or CSS, you may need to use {literal}{/literal} for it to execute.
You can also do IF ELSE statements as follows:

{if $BodyID =='variable'}
HTML, JavaScript or CSS
{else}
HTML, JavaScript or CSS
{/if}

Finally, if you want to do the opposite, as in something "NOT" matching, you could do the following:

{if $BodyID !='variable'}
HTML, JavaScript or CSS
{/if}

The exclamation (!) before equals (=), means if $BodyID does not equal the variable, then fire the code.

Example of Using Variables with "If Statements" 

One way you can use this ability would be to add a large search bar to the category page of your theme.

Vanilla_Demo_Search

It starts by deciding where you want it to appear. In the above example, we placed a search bar just above content on the category page. To do the same, modify the content area in the customize theme HTML tab in the Vanilla Forums dashboard:

Please note this example uses the Bootstrap theme, so make changes as needed for your theme. You can also add CSS to make it look better with the new classes created. Add that to the customize theme CSS tab.

Final Thoughts On Using Variables

Again, please note that what has been shown is very powerful and you should not attempt this unless you are comfortable with editing code. As you can see, though, with conditionals, variables, HTML and CSS, you can really get creative. We hope you found these tips helpful. Check under the product category for more product tips.

Vanilla Forums offers a cloud based solution which can easily be themed to match your brand. Try Vanilla Forums Cloud Solution free for 30-days.

Topics: Product, News

Related posts

Subscribe to the Community Corner Newsletter and get expert insight and analysis on how to get the most out of your online community every Friday.

Search this blog

Recent Posts

community playbook

Have an Article for Vanilla's Blog?

Send us an email to pr@vanillaforums.com with your topic idea and we'll circle back with our publishing guidelines.