Embed Moot Forums into Twenty Twelve Theme

I recently discovered a new type of forum software called Moot. It’s different from most forum scripts, it’s a system similar to Disqus or LiveFyre comment system. It’s still in beta and lacks a few upcoming features, but fully functional and seems to work really well.

It’s features consist of image posting, watched topics, email notifications, Facebook sign on, syntax highlighting, post reporting, Akismet spam control, create new forums, completely mobile ready, real-time post preview, instant updates (no need to refresh), SEO features for redirecting to your embedded site, and can even be used as a commenting system. A forum import system is also planned.

Moot Forums WordPress - Zeaks.org

Moot is meant to be embedded into your site, it uses an external style sheet which can be overridden with your own, so you do have a fair amount of control when it comes to the look such as colors and fonts.

Anyways, heres how to embed Moot into Twenty Twelve theme by creating a page template.

Start off by creating a new file, and name it moot.php and open it. We’ll be creating a page template, so at the top of your new file add this.

<?php
/**
 * Template Name: Moot Forums
 * Description: Twenty Twelve template to display Moot Forums.
 * 
 */
 get_header(); ?>

This gives the page template a name and calls the header into the it. We’ll also be adding an area above the forum that we can include post content in case you want to add a welcome message or information on forum rules.

To do this we will borrow some code from content.php. Add this below what you have in moot.php

<div class="wpmoot">
	<div id="primary" class="site-content">
		<div id="content" role="main">

	<!-- Show content above the forums -->
		<?php while ( have_posts() ) : the_post(); ?>
				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
					<header class="entry-header">
						<h1 class="entry-title"><?php the_title(); ?></h1>
					</header><!-- .entry-header -->
					<div class="entry-content">
						<?php the_content(); ?>
					</div><!-- .entry-content -->
				</article><!-- #post -->		
		<?php endwhile; ?>

Next, head over to Moot.it and get yourself a forum. It’s free and only takes a minute. Once you have your new forum, click the “embed this” link and copy the contents of the pop-up window onto a text file.

Open moot.php and under what we already have, add this.

	<!-- 1. Render for media devices -->		
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- 2. Render for IE -->
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<!-- 3. Moot style -->
	<link rel="stylesheet" type="text/css" href="//cdn.moot.it/1/moot.css" />

The first line ensures Moot renders for media devices, the second link loads the latest rendering engine for IE. The last line calls the moot stylesheet which is hosted by a CDN.

Next a bit of style is needed for this template and moot allows us to add it right in the page. This will give you a basic style matching Twenty Twelve, you can add more to it later.
Add this to your moot.php.

	<!-- (4) Custom CSS -->
	<style>
#primary {
	width: 100%;
	margin: 0;
}

.entry-content {
	background: #efefef;
	padding: 0 15px;
}

.site-content article {
    border-bottom: 0;
    margin-bottom: -2rem;
    margin-top: -2rem;
}

.entry-header .entry-title {
	display: none;
}
/* Fixes forum title spacing conflicts with Twenty Twelve */
h1, h2, h3, h4, h5, h6 {
	clear: none;
}
#wpmoot .hentry {
	padding: 0;
}
	</style>

Moot requires the jQuery 1.7 or higher, it also needs the moot application and your forum called into the template. Add this to your template next, be sure to change the forum URL to your own, otherwise you’ll show my forum on your site.

	<!-- jQuery library (v1.7+ required) -->
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

	<!-- Moot application -->
	<script src="//cdn.moot.it/1/moot.min.js"></script>
			
	<!-- Placeholder for the forum. The forum will be rendered inside this element -->
	<a class="moot" href="https://api.moot.it/zeaks"></a>

Finally we can close our dives and call the footer into the template and we’re done. Add this to the end of your file.

		</div><!-- #content -->
	</div><!-- #primary -->	
</div><!-- .wpmoot -->

<?php get_footer(); ?>

Save and close moot.php. Head to your admin section, create a new page, call it whatever you like, and on the right column select the Moot Forum page template and publish it. You can type information into the post editor if you want to display it above your forum.

You should check out the Moot Docs https://moot.it/docs/ for more information on embedding your forum. There’s optional Beta JavaScript and CSS you can try out if which usually contain new features.

Let me know how your forum turned out by leaving a comment!

Comments

  1. says

    Thank you for great tutorial and would like to know if you get emails as site owner when a visitor post on forum as I do not see any setting on Moots website.

  2. says

    As far as I know you won’t get emails on new topics as a site admin. When you visit your forums, you will see a numbered notification under “All Posts” indicating any new posts/toics since your last visit.

    Any topics you start you’ll get an email when someone replies, you can “watch” any post and receive email notifications for that post.

    If you are logged into the site and receive a new post a chat bubble will appear in the lower right, and the thread/reply will become visible instantly.

    I read somewhere they will be adding an API and more options/features could be added later.

    You should ask on the Moot Forums about this though, they are usually very quick to respond.

Leave a Reply