Adding a Blog in CMS Made Simple (CMSMS)

Clients love CMSMS. Since its focus isn’t on blogging, it becomes an issue when a client wants a blog integrated into their website. When a blog is requested, we really have two choices. We can use a blogging platform such as WordPress or Blogger, or we can implement and customize a series of modules that work together to create a blog within CMSMS. For some clients I select the CMSMS blog option, as it keeps the client working under a single login and easy-to-use platform. In this article I’ll be outlining the modules needed and steps to take in order to incorporate a blogging system into CMSMS.

CMSMS Modules Used

• Captcha
• CGBlog
• CGExtensions
• CGFeedback (default configuration)
• CGFeedMaker
• CGSimpleSmarty

Step 1: Get and Install Stuff

Dowload and install the modules listed above, as well as any other dependencies not listed. I’ll assume that you’re using the most recent version of CMSMS (version 1.8 "Madagascar" as of this writing) and upgraded any of these modules you already have installed.

Step 2: Update the Calguys Blog Module Summary View Template

<div id="blog">
{if $pagecount > 1}
<div class="details">
{if $pagenumber > 1}
{$firstpage} {$prevpage}
{/if}
{$pagetext} {$pagenumber} {$oftext} {$pagecount}
{if $pagenumber < $pagecount}
{$nextpage} {$lastpage}
{/if}
</div>
{/if}
{foreach from=$items item=entry}
<div class="blogEntry">
<h2><a href="{$entry->detail_url}" title="{$entry->title|escape:htmlall}">{$entry->title|escape}</a></h2>
<div class="blogData">

{if $entry->postdate}{$entry->postdate|cms_date_format}{/if} |
{if $entry->categories}
{strip}
{foreach from=$entry->categories item='category'}
{$category.name} |
{/foreach}
{/strip}
{/if}
<a class="comments" href="{$entry->detail_url}#comments">Comments ({CGFeedback key1="CGBlog" key2=$entry->id action="ratings" ratingstemplate="count"})</a>

</div><!-- end blogData -->
{if $entry->summary}
{eval var=$entry->summary}
{else if $entry->content}
{eval var=$entry->content}
{/if}

<div class="blogMore"><a class="fullArticle" href="{$entry->detail_url}" title="{$entry->title|escape:htmlall}"><img src="media/images/buttons/blank.gif" alt="Read Full Article" /></a></div>
</div><!-- end blogEntry -->
<hr />
{/foreach}
</div><!-- end blog -->

Step 3: Update the Calguys Blog Module Detail View Template

<div id="blog">
{* set a canonical variable that can be used in the head section if process_whole_template is false in the config.php *}
{if isset($entry->canonical)}
{assign var='canonical' value=$entry->canonical}
{/if}
{assign var='dynamic_title' value=$entry->title|escape}
{CGFeedback key1="CGBlog" key2=$entry->id action="ratings" ratingstemplate="count" assign="num_comments"}
<h2>{$entry->title|escape}</h2>

<div class="blogData">
{if $entry->postdate}
on {$entry->postdate|cms_date_format}
{/if} |
{if $entry->categories}
{strip}
{foreach from=$entry->categories item='category'}{$category.name} {/foreach} |
{/strip}
{/if}
<a href="{$canonical}#comments">{$num_comments} comments </a>
</div>
{eval var=$entry->content}

{if $entry->extra}
<div id="CGBlogPostDetailExtra">
{$extra_label} {$entry->extra}
</div>
{/if}
<div class="return"><a href="javascript:history.go(-1)"><img src="media/images/buttons/blank.gif" alt="View" /></a></div>
<a name="comments"></a>
<hr />

<h2>Comments</h2>

{if $num_comments != '0'}
{CGFeedback key1="CGBlog" key2=$entry->id action="summary"}
{else}
<p>There are no comments on this article. Be the first to post a comment by using the form below ...</p>
{/if}

<hr />

<h2>Leave a Comment</h2>

{CGFeedback key1="CGBlog" key2=$entry->id action="default"}
</div><!-- end blog -->

Step 4: Update the Calguys Feedback Module’s Comment Form Template

The ratings portion of the Feedback Module were removed. You can easily re-add it by pulling in the sample code from the module.

{if isset($message)}
<div class="pagemessage">{$message}</div>
{else}
{* no message... display the form *}
<div class="cgfeedback_addcoment">
{if isset($error)}
<div class="error">{$error}.</div>
{/if}
{$formstart}
<table class="form">
<tr>
<th>Title of Comment:</th>
<td><input type="text" name="{$actionid}title" size="40" maxlength="255" value="{$title}"/></td>
</tr>
<tr>

<th>Name:</th>
<td><input type="text" name="{$actionid}author_name" size="40" maxlength="255" value="{$author_name}"/>
</tr>
<tr>

<th>Email Address:</th>
<td><input type="text" name="{$actionid}author_email" size="40" maxlength="255" value="{$author_email}"/>
</tr>
<tr>

<th>{$mod->Lang('prompt_notify')}:</th>
<td><input type="checkbox" name="{$actionid}author_notify" value="1" {if $author_notify == 1}checked="checked"{/if}/>
</tr>
<tr>
<th colspan="2">Your Comment(s):</th>
</tr>
<tr>
<td colspan="2">{$input_comment}</td>
</tr>

{* custom fields *}
{if isset($fields)}

{foreach from=$fields key='fieldid' item='field'}
<tr>

<th>{$field.name}:</th>
<td>
{if isset($field.input)}
{$field.input}
{elseif $field.type == 0 or $field.type == 1 }
<input type="text" name="{$actionid}field_{$fieldid}" value="{$field.value}" size="{$field.attrib.length}" maxlength="{$field.atrrib.maxlength}"/>
{elseif $field.type == 2}
{* text area fields should have an input... so this should never get caled... but just in case *}
<textarea name="{$actionid}field_{$fieldid}">{$field.value}</textarea>
{elseif $field.type == 3}
<select name="{$actionid}field_{$fieldid}">
{html_options options=$field.attrib.options selected="{$field.value}"}
</select>
{elseif $field.type == 4}
<select multiple="multiple" size="4" name="{$actionid}field_{$fieldid}[]">
{html_options options=$field.attrib.options selected="{$field.value}"}
</select>
{/if}
</td>

</tr>
{/foreach}
{/if}
{if isset($captcha_img)}
{* handle captcha image *}

<tr>
<th colspan="2">Security Code Below: (helps me prevent spam)</th>
</tr>
<tr>
<td class="indent" colspan="2">
{$captcha_img}<br />
<input type="text" name="{$actionid}feedback_captcha" value="" size="20"/>
</td>
</tr>

{/if}
<tr class="submit">
<td> </td>
<td><input type="submit" src="media/images/buttons/blank.gif" name="{$actionid}submit" value="{$mod->Lang('submit')}" /></td>
</tr>

</table>
{$formend}
</div>
{/if}

Step 5: Adding a Counter to Comments using Calguys Feedback Module – Ratings Template

IMPORTANT: You’ll need to name this template “count”.

{strip}
	{$stats.count}
{/strip}

Step 6: Add the Blog to a Page

Create a new page called "Blog" (page alias "blog) and add this to your page to pull in the blog:

{CGBlog}

If you want to add a category list, add something like this to the page as well (I float mine to the right):

<h2>Archives by Category</h2>
{CGBlog action="browsecat"}

Step 7: Add the Styles to Your StyleSheet

Although the sytles provided below may need to be customized for your website, they should give you a solid foundation for integrating into your site.

/* BLOG
=============================== */
#blog {
	width: 635px;
	margin: 0;
	padding: 0;
	float: left;
	}

#sidebar {
	width: 230px;
	margin: 35px 0;
	float: right;
	}
.blogEntry { }
.blogData {
	font-size: 10px;
	color: #838383;
	text-transform: uppercase;
	margin-bottom: 15px;
	}
.blogSummary { }
.blogContent { }
.blogExtra { }
.blogFields { }
.blogMore { }
#blogDetail { }
#blogDetailContent { }
ul#comments { }
.comment { margin: 15px; }
.commentTitle { font-size: 16px; }
.commentData {
	font-size: 10px;
	color: #838383;
	text-transform: uppercase;
	}
.commentAuthor { font-size: 12px; }
.commentDetails { font-size: 12px; }

/* FEEDBACK FORM
=============================== */
form {
	margin: 0;
	padding: 0;
	}

input, select, textarea {
	font-family: arial, helvetica, sans-serif;
	font-size: 13px;
	}

.form { margin: 0 0 15px 0; }

.form th {
	text-align: left;
	border-bottom: 1px dashed #e4e4e4;
	padding: 10px;
	font-size: 12px;
	}
.form td {
	border-bottom: 1px dashed #e4e4e4;
	padding: 10px;
	font-size: 12px;
	}

.submit td {
	background: #f2f2f2;
	text-align: right;
	border-bottom: none !important;
	}

td.indent { padding-left: 20px; }
.captchapict { margin-bottom: 5px; }
.error {
	background: #fbf4e1;
	border: 2px solid #e7ab0b;
	margin: 20px 0;
	padding: 10px;
	font-size: 12px;
	width: 550px;
	}

/* MISCELLANOUS
=============================== */
hr {
	border: 0;
	color: #ccc;
	background-color: #ccc;
	height: 1px;
	width: 100%;
	text-align: left;
	margin: 25px 0;
	}

Good luck, and if you make use of any of this article, please let me know!

Comments