Tongara's Flatpress Dev Blog

This guide assumes you already have a Disqus site created, and you’ve got your Disqus Universal Code ready. If not, please visit https://disqus.com/profile/signup/ and do that first.

First things first, we’re going to be using the leggero default theme, but this can be done with any theme at all.

Go ahead and open up your theme’s “theme.conf.php”, and underneath the line that says

$theme ['default_style'] = leggero';

You should add the following:

$theme['hassingle'] = true;

That will make sure your blog entries are now displaying as their own entries on their own single page permalinks, which is a must imo.

It took me a good HOUR to find that line of code, and I randomly found it on a flatpress news update about “FlatPress 0.804 Vivace” from all the way back in May 2008 (!!!!), which can be seen here. I really think it should be added to the wiki’s general knowledge on Flatpress. Anyway, back to the guide…

Now you’re going to want to make a new file in the same directory called “single-default.tpl”, and you’re going to want to copy the contents of your “entry-default.tpl” like so, and then we’re going to paste that into our newly created single-default.tpl:

	<div itemscope itemtype="http://schema.org/BlogPosting" id="{$id}" class="entry {$date|date_format:"y-%Y m-%m d-%d"}">
				{* 	using the following way to print the date, if more 	*} 
				{*	than one entry have been written the same day,		*} 
				{*	 the date will be printed only once 				*}

		{$date|date_format_daily:"<h2 class="date">`$fp_config.locale.dateformat`</h2>"}

				<h3 itemprop="name">
				<a href="{$id|link:post_link}">
				{$subject|tag:the_title}
				</a>
				</h3>
				{include file=shared:entryadminctrls.tpl}

				<span itemprop="articleBody">
				{$content|tag:the_content}
				</span>

				<ul class="entry-footer">

				<li class="entry-info">Posted by <span itemprop="author">{$author}</span> at
				{$date|date_format}
				<span itemprop="articleSection">
				{if ($categories)} in {$categories|@filed}{/if}
				</span>
				</li> 

				{if !(in_array('commslock', $categories) && !$comments)}
				<li class="link-comments">
				<a href="{$id|link:comments_link}#comments">{$comments|tag:comments_number} 
					{if isset($views)}(<strong>{$views}</strong> views){/if}
				</a>
				</li>
				{/if}

				</ul>

	</div>

Now we need to do some editing!

Find the following code

				{if !(in_array('commslock', $categories) && !$comments)}
				<li class="link-comments">
				<a href="{$id|link:comments_link}#comments">{$comments|tag:comments_number} 
					{if isset($views)}(<strong>{$views}</strong> views){/if}
				</a>
				</li>
				{/if}

Delete that code, and then underneath the

simply in your Disqus universal code, like below:

<P> <div id="disqus_thread"></div>  
{literal}<script>  
  
/** 
*  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS. 
*  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/  
/* 
var disqus_config = function () { 
this.page.url = YOUR-SITE-PAGE.URL/YOUR-PAGE.php;  // Replace PAGE_URL with your page's canonical URL variable 
this.page.identifier = YOUR_UNIQUE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable 
}; 
*/  
(function() { // DON'T EDIT BELOW THIS LINE  
var d = document, s = d.createElement('script'); 
s.src = 'https://YOUR-DISQUS-SITE-NAME.disqus.com/embed.js';  
s.setAttribute('data-timestamp', +new Date());  
(d.head || d.body).appendChild(s);  
})();  
</script>  
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>{/literal}  
    </div>  

You can obviously place this where is best suited in your own code if your theme doesn’t contain a “<ul>” here, etc, but towards the bottom after the rest of the content is probably best.

To note, you MUST wrap your Disqus universal code in {literal}{/literal} tags, as script tags in the body of a page that aren’t wrapped in them is going to confuse smarty, and smarty is going to throw errors at you, which is NOT cool. This fixes that, and was something else I had to find out by searching through Smarty support forums. Anyway, back to the guide again…

Now that you’ve done that, in the same folder, you’re going to want to create a new file called “single.tpl”, and then you’re going to want to copy the contents of your index.tpl like so, and then we’re going to paste that into our newly created single.tpl:

{include file=header.tpl}
		<div id="main">

		{entry_block}

			{entry}
			{include file='entry-default.tpl'}
			{/entry}

			<div class="navigation">
				{nextpage}{prevpage}
			</div>

		{/entry_block}
		</div>

		{include file=widgets.tpl}

{include file=footer.tpl}

Now, we’re going to do a bit more editing!

Replace the following line

{include file='entry-default.tpl'}

with

{include file='single-default.tpl'}

Now we need to edit your entry-default.tpl to add the Disqus comments link and comment count. When you’ve opened that file, find the following line

<a href="{$id|link:comments_link}#comments">{$comments|tag:comments_number}

and replace it with

<a href="{$id|link:post_link}#disqus_thread">Comments</a>

And finally, we’re going to add the following discord count script right above the tag in your footer.tpl file:

<script id="dsq-count-scr" src="//flat-1.disqus.com/count.js" async></script>

And there you have it, your Disqus comments system will be fully operational, and not to mention that all of your posts are now on their own pages, making the whole thing a bit nicer. You might have to visit your blog entry at least once for the counter to work, but that is a fault with Disqus and not Flatpress or this modification.

If you just so happen to run into any problems, then I’ll try to help, but it’s a pretty simple guide and I’m sure it will be easy enough to implement!