How to embed your forum into a Wordpress Page

vrijvlinder

Copy the script code for your forum from the Dashboard of the forum.

Start a new page In Wordpress call it Forum(Or whatever you want to call it).

You need to add some code to control things for the size. And for this you will need a web inspector to help you find the body id for the Wordpress forum page. I enclosed a screen shot of the web inspector showing where to find the id for the page you embedded the forum in. You must be inspecting the Wordpress page where the forum is embedded .

Once you know the forum page id you must add this code to you Wordpress custom theme css file. The id is very long so you only need the first part like below. The page Id below (page-id-170) is for my page so you must use your own.

If you have a Logo in your forum and on Wordpress, you can remove the logo from that specific page using the ID of the page as the class. If you do not want a double Logo. This way your stand alone forum will still look the same with the logo but will not interfere with your Wordpress Logo placement.

    This will remove the Logo only from that Wordpress page

     body.page.page-id-170 #branding {
    display:none!important;
    } 

    This will make the container for the forum the proper size for the forum theme you are using. This will allow for the use of fixed width themes.

     body.page.page-id-170 .one-column #content {
    margin: 0 auto;
    float: none;
    width: 96%;
    } 

This will make the entire container of the page the proper width needed to fit a forum using any width. I added some space at the top since we removed the logo and things were a bit cluttered. You can adjust it any way you want.

body.page.page-id-170 #wrapper {
width: 97%;
margin-top:50px;
}

**Remember to add this into your Wordpress Custom css file. **

vrijvlinder

I guess I left something out so here goes...this is without the use of the plugin.

To create a page in Wordpress to hold your forum you simply copy the code from the dashboard, then create a new page in Wordpress call it Forum or what ever, if you use the same name as where your stand alone forum is it will redirect there so call it something else like forum2.

Add into the text editor of the WP page :

< div id="forum" >< script code goes here > < /div >

Save the page. You can use the code above to make it fit if you need to.

You can also extract the the iframe for the forum from the script and use that instead of the script.

José_LHP

I am beginner with Vanilla Forums and I had a lot of problems to use it with Wordpress
Could somebody help me??? I am so sorry my english is not good, but i ll try explain.
I m using a vanilla forums into my server, ie don't using a vanilla cloud.
Problems are:
I can't change my theme, if I do it appear the message:
Bonk...
When I use the default theme with "embeed vanilla" the width goes out the screen...

Actually I 'd want a recursive theme like my theme in wordpress, and I 'd like change colors, but I don't know where is the CSS file of the theme.

I don't know if you are understand me but I really need your help
My website to see what I wrote is www.otimao.com.br/forum-do-corinthians

Thank you!

vrijvlinder

Ok, you may not have installed Vanilla correctly. Usually when you change themes or edit plugins it is a good idea to delete the ini files from the forum cache folder. This usually clear it up.

If it does not fix it, then you need to make sure your config.php is writeable.

You can also change themes by editing the config.php and putting the name of your theme instead of default.

Before you begin to combine WP and Vanilla make sure each one works as it should on it's own.

Please download a custom theme compatible with your version of Vanilla, as there are some that are approved but not for any version available here.

I also would suggest a shorter name for your forum since that will be the name of all the files. Just call it forum and name the forum itself Corinthians . will make it easier for people to type in google to find it.

I made a theme that matches Modern Green WP theme, it is called GreenGlass. But you can make any theme match if you know some css.

chanh

This is very useful tip. Thanks

winsletewr

@chanh said:
This is very useful tip. Thanks

This is nice information as i love website in wordpress

Ashiq

To get more featured Wordpress embed option just knock.