Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Try Vanilla Forums Cloud product

Ready to contribute?

Amazing! Sign our contributors' agreement and then join us on GitHub.

Vanilla 2.3 fully supports PHP 7. Get it now!

How to embed your forum in Wordpress

vrijvlindervrijvlinder Papillon-Sauvage MVP
edited March 18 in Tutorials

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

Start a new page In Wordpress call it Forum.

Add a div to put the script code for the forum inside. example:

<div class="forum"><script>code </script></div>

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.

once you know the forum page id you must add this code to your Wordpress custom theme css file. The id is very long so you only need the first part like below.

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.

 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;
}

If you only want to fix the CSS for the iframe for just comments or the discussions

iframe#vanilla{
min-height:1200px; 
width:100%;
}

You may also be able to use object to add your CSS rules

embed, object{
width:100%;
height:1200px;
}
Sign In or Register to comment.