Learn ExpressionEngine® Fast
In this chapter I’ll show how to implement the weblog/comments template that will display the full weblog post as well as visitor comments. This is a pretty straightforward ExpressionEngine implementation with the exception of creating some additional embedded templates.
While the weblog/index template got fairly involved (and started to creep away from my tendency to create more simpler templates than fewer complex ones), implementing a template to display an entire weblog post and allow visitors to add comments is much simpler. This is one of those “all roads lead here” situations in that no matter how the visitor chooses to use the index template to find a particular post, once they click through to read the full weblog post this template will be used.
The work, however, will start in the weblog/index template. Since I’ll want to have the same left-column options of category and archive navigation on the single entry/comments pages, I want to create embedded templates to hold the code that generates those links. I can then embed those new templates back into both the weblog/index and weblog/comments parent templates.
I also like to handle the actual comment display and comment entry form in an embedded template - so that if you implement comments elsewhere on the site you can just re-use the same form. It’s usually a bit of work to style comments and the form so I don’t want that code to exist in multiple places.
So overall the work at hand today is:
- Edit weblog/index to remove the category navigation code and place it in a new embeds/weblog_category_nav template
- Edit weblog/index to remove the archive navigation code and place it in a new embeds/weblog_archive_nav template
- Copy weblog/index as a starting point for weblog/comments
- Edit weblog/comments to remove category and date heading code
- Edit weblog/comments to remove links to itself
- Create a new embeds/comments_form template
- Edit weblog/comments to use embeds/comments_form
As usual I will provide you with a zip archive containing all the finished versions of these templates later on in this post. For the moment I want to work through the process of creating them.
Creating embeds/weblog_category_nav
Open weblog/index for editing and select the entire “navcontainer” div that contains the code to build the category navigation:
<div class="navcontainer">
<h3>Categories</h3>
<ul class="navlist">
{!--This tag will build the left-column subnavigation --}
{exp:weblog:categories weblog="weblog" style="linear"}
<li>
<a
{!--This conditional will cause the link to the currently-viewed category to be highlighted --}
{if segment_3==category_url_title}
class="active"
{/if}
href="{path=weblog/index}">{category_name}
</a>
</li>
{/exp:weblog:categories}
{!--This conditional will display a "show all" link when template is loaded in a category mode --}
{if segment_2=="category"}
<li><a href="/index.php/weblog/">Show All Posts</a></li>
{/if}
</ul>
</div>
Copy this, and create a new template in your embeds template group. Name it “weblog_category_nav”. Once the template is created paste in the code and save it. Now go back into weblog/index and replace that chunk of code with:
{embed="embeds/weblog_category_nav"}
Repeat that process for the code that builds the archive navigation - again grabbing everything in the navcontainer div. Name the new template weblog_archive_nav. Your weblog/index template should now have only this in the left column:
<div class="content_page_left">
{embed="embeds/weblog_category_nav"}
{embed="embeds/weblog_archive_nav"}
</div>
Verify that the page still functions correctly in the browser. Sometimes I grab a bit more or less code than I intended and end up with a div structure mismatch. If it functions correctly then you can move onto creating the comments template.
Create weblog/comments
Create a new template in the weblog template group, but not a blank one this time. In the “Default Template Data” area choose to duplicate weblog/index. Click Submit to create the new template.
Edit weblog/comments
The index template is a good starting point for the comments template, but there is quite a bit of unnecessary code here. You can remove - both from the embed statement that builds the page title and anywhere further into the code - the category_heading and the date_heading tagset. For the page title, what’s needed is the static word of “weblog” and the entry title.
Here’s the revised page-title building code of my weblog/comments template:
{embed="embeds/html_header"
{!--The my_title value will always be used. --}
my_title="Weblog |
{!--This being a single entry page we just need the entry title --}
{exp:weblog:entries weblog="weblog" limit="1"
disable="custom_fields|trackbacks|member_data|pagination|categories"}
{title}
{/exp:weblog:entries}
"}
Further into the code you can also remove the conditional that creates the “Full Post” link and just display the full_post custom field. You can also edit any of the links that point to the comments template - what I’ve done is change them to point at a bookmark instead—so the link will jump users down to where the comments actually start.
Here is the revised main content area of my weblog/comments template:
<div class="content_page_right">
{!--This is the main weblog:entries tag that will return individual blog posts. The category links and archive links function as a filter on this tag. --}
{exp:weblog:entries weblog="weblog" disable="trackbacks" limit="1"}
<div class="post">
<h3>{title}</h3>
<div class="post_meta">
By {url_or_email_as_author} on {entry_date format='%F %d, %Y'} in
{categories} <a href="{path=weblog/index}">{category_name}</a> {/categories}
{if allow_comments}({comment_total}) <a href="#comments">Comments</a>{/if}
</div>
{teaser}
{full_post}
</div>
{/exp:weblog:entries}
</div>
Save your changes and load your weblog/index page in the browser. You should be able to click any “full post” link and bring up the new weblog/comments template, and it should display the entire post.
Displaying and Accepting Comments
At this point you have a functioning single entry page; but it won’t show any comments or display the form needed to accept new comments. Let’s add that. But first, a word on my approach here. For me the styling of both comments and the comment form is time consuming, and especially so with the template approach we’ve taken here. If the template set doesn’t come with weblog templates (as this one didn’t) then there are a fair number of items to style. It can get tedious, and once done I don’t want to have to mess with it again. With a site that’s likely to allow comments in multiple places, it just makes sense to put the comments display and form into an embedded template so we can pull it from anywhere on the site.
First I need to create the embedded template. I’ve named mine “comments_form”, and here’s the code it contains. Give it a read-though, then I’ll cover the highlights:
<a name="comments" ></a>
{exp:comment:entries weblog="{embed:the_weblog}" limit="1"}
{if total_results >0}
<div class="info"><h3>Previous Comments</h3></div>
{/if}
{/exp:comment:entries}
{exp:comment:entries weblog="{embed:the_weblog}" limit="100"}
<div class="comment_entry">
<h4>#{count} from {url_or_email_as_author} on {comment_date format='%F %d, %Y'}</h4>
{comment}
</div>
{/exp:comment:entries}
<div id="comment_entry_form">
{exp:comment:form}
<h3>Add Your Comment</h3>
{if logged_out}
<div class="comment_label">
Name:
</div>
<div class="comment_field">
<input type="text" class="textbox" name="name" value="{name}" />
</div>
<div class="comment_label">
Email:
</div>
<div class="comment_field">
<input type="text" class="textbox" name="email" value="{email}" />
</div>
<div class="comment_label">
URL:
</div>
<div class="comment_field">
<input type="text" class="textbox" name="url" value="{url}" />
</div>
{/if}
<div class="comment_label">
Comments:
</div>
<div class="comment_field">
<textarea name="comment" cols="60" rows="12">{comment}</textarea>
</div>
{if logged_out}
<div class="comment_field">
<p>
<input type="checkbox" class="check" name="save_info" value="yes" {save_info} />
Remember me?
</p>
</div>
{/if}
<div class="comment_field">
<p>
<input type="checkbox" class="check" name="notify_me" value="yes" {notify_me} />
Shoot me an email when someone responds?
</p>
</div>
{if captcha}
<div class="comment_label">
Enter this word:
</div>
<div class="comment_field">
<p>{captcha}</p>
</div>
<div class="comment_label">
Here:
</div>
<div class="comment_field">
<p>
<input type="text" class="textbox" name="captcha" value=""
size="20" maxlength="20" style="width:140px;" />
</p>
</div>
{/if}
<div class="comment_field">
<p>
<input type="image" class="comment_submit"
src="{site_url}images/interface/send-button.gif" name="submit" value="Submit" />
</p>
</div>
{/exp:comment:form}
</div>
My starting point for this code was the default templates that install with EE. What I’ve added/changed is:
- Put an HTML bookmark at the top so that I can link directly to this portion of the page both from weblog/index and the article portion of this template
- Added an initial comment:entries[/url] tag for the sole purpose of displaying the “Previous Comments” header only if there are, in fact, previous comments. This is done by using the count variable in a conditional
- Changed the CSS selectors to match what I created in my own stylesheet
The rest of the template is pretty straightforward and “out of the box” so I won’t cover it in detail here. All that’s left is to go back into weblog/comments and add the embed statement to pull in this new embeds/comments_form template. This goes right after the closing weblog:entries tag in the main content div:
{embed="embeds/comments_form" the_weblog="weblog"}
And note that we’re passing in the required weblog parameter.
The Results
You can view the results at this url where I have a test entry and some test comments: http://church.train-ee.com/index.php/weblog/comments/weblog-post-eight/. Per the comment code you will get a different comment entry form depending on if you are logged in or out. One tip I have for working with these types of template is to have two different browsers open, and be logged in with one and logged out with the other. This will save you some time.
Comment Permissions
I also want to point out that there are two ways to enable or disable commenting. You can do it at the weblog level by editing your preferences at Admin > Weblog Administration > Weblog Management > Edit Weblog > Comment Posting Preferences.
You can also set it at the member group level by editing those preferences at Admin > Members and Groups > Member Groups > Edit Member Group > Comment Posting Privileges.
Here on Train-ee I have the member groups configured such that you have to register and be part of the “Members” group or higher to post comments. The Guests group has comment privileges disabled. On the Church site, I set it up such that the comment form will display to guests but comment submissions by guests will generate an error. This is by design - to be able to show the comment form and it’s styling, but not open up the site for spam issues. Once this site is done and auctioned off I will reconfigure that to suit the needs of the new owner.
Companion Files
The zip archive for this chapter has the following new and updated templates:
- stylesheets/style
- embeds/weblog_category_nav
- embeds/weblog_archive_nav
- embeds/comment_form
- weblog/comments
- weblog/index
You can download the companion files here: 14-Weblog-Comments.zip
That about does it for a working weblog with index, category, archive views and commenting. Up next? I’ll start in on the Ministries section.
Series Navigation
Next entry: 15 - Beginning the Ministries Section
Previous entry: 13 - Implementing the Weblog Index Template
Previous Comments
Mike,
I have followed you so far, but I noticed url problems when I did lesson 13 in that the navigation buttons (categories and archives) did not go to the correct url’s to display filtered entries. After completing this lesson, I was frustrated to discover that the full page entries similarly goes to the same weblog.
I think this has something to do with configuration of the new EE site. I am hosted by EE themselves, and I have the multi-site feature like you but have not yet set up domains.
I paid attention to the url’s as you suggested. When I hover, Safari displays the numeric url’s you suggest, but they actually go to the same display of my overall site weblog (the one installed when EE is installed.
Here are some sample url’s that appear in the browser:
God sightings http://mysitename.pmhclients.com/index.php/weblog/C9/
CHurch NEWs http://mysitename.pmhclients.com/index.php/weblog/C7/
From the pastor http://mysitename.pmhclients.com/index.php/weblog/C7/
FULL POST example
http://mysitename.pmhclients.com/index.php/weblog/comments/gnosticism_glorified/
I notice, however, that the Weblog I created in the earlier lessons is displayed properly. But it’s url is:
WEBLOG http://mysitename.pmhclients.com/index.php/site/weblog-index/
or
http://mysitename.pmhclients.com/index.php/page-comps/weblog-index/
I thought I followed your instructions painstakingly. Any idea where I went wrong?
Craig - you haven’t told EE to use category url titles rather than category ID’s. The setting is found under Admin › Weblog Administration › Global Weblog Preferences >Use Category URL Titles In Links?
Set that to Yes.
You were right about that, but that did not address the problem, but merely changed the data:
Notice that the url of the weblog page I created has the word “site” in the url. The others are looking at a different directory.
Weblog url
http://mysitename.pmhclients.com/index.php/site/weblog-index/
God sightings http://mysitename.pmhclients.com/index.php/weblog/category/god_sightings/
CHurch NEWs
http://mysitename.pmhclients.com/index.php/weblog/category/church_news/
From the pastor
http://mysitename.pmhclients.com/index.php/weblog/category/from_the_pastor/
Archives
http://mysitename.pmhclients.com/index.php/weblog/2008/06/
Full Post
http://mysitename.pmhclients.com/index.php/weblog/comments/gnosticism_glorified/
It seems like something is supposed to located in a different location. Because the above urls all display the contents of the original installation weblog called “default_site_weblog” rather than mine called “weblog.”
Ah - you created your weblog index template in the “site” template group, named “weblog-index”.
Instead you need a template group named “weblog”, with a template named “index”.
Keep in mind with EE these are no longer directories names but rather are template group and template names.
Add Your Comment
Latest Products
- Screencasts : Prepping an EE Site for Client Access
So you’ve been slaving away… More >> - Screencasts : Members-Only Content and Workflow
Do you have content that… More >> - Screencasts : Designing an ExpressionEngine Architecture
OK - so you’ve got… More >> - Products RSS Feed
- Products Email Notification
Checkout Requirements
In order to make a purchase from Train-ee you’ll need to first be registered and logged in, and you will also need a PayPal account.
Links to the downloadable files will be sent upon receipt of payment.
Note that if you pay with a credit or debit card and PayPal sees the transaction as an “eCheck”, there will be a 3-4 day delay before the transaction completes and you receive the download links.
Hi Mike,
Heard your interview over on Creative Expert—man, you really do know what you’re doing (grin).
Appreciate the primer on forms, as I’m working an EE site for our local community website (south-east Australia)—and the basics are proving quite straight forward (thanks to what you’ve shown us) but the extended community stuff is quite challenging for a newb.
Really appreciating your generosity (and sorry for the long post).
Cheers - Andrew