I’ve been using MODx for more than 6 months now. I’m not a programmer. I have a rather general understanding of code and how things work. That said, my biggest challenge so far has been to get the blog feature to work on my website.
I’d say I’m pretty good at following instructions, but I found out that the instructions for building a blog in the wiki, although followed diligently, did not produce a working blog feature. So, after spending a day and a half trying to figure things out, reading blog posts, wiki’s, trying to put pieces together from all kinds of different sources, I finally ended up with a SIMPLE (working) BLOG
I thought I should post here what I did exactly, so that you don’t have to go through the same thing all over again.
The instructions are for the 0.9.6.3 release!
This combines the two most popular wiki posts... with the code tweaks that produced a working blog feature. The two wiki posts I’m referring to are:
http://wiki.modxcms.com/index.php/Basic_Blog
and
http://wiki.modxcms.com/index.php/Creating_a_Blog_like_in_the_Default_Content
Here it goes..
Required Snippets
* Ditto
* Jot
* NewsPublisher
They all came pre-installed with my 0.9.6.3 edition.
Code used (AFTER THIS LINE IS ALL THE CODEE THAT WORKED FOR ME)
Blog Page
Page ID is 2. If your page ID is different, you will need to change the number in &startID=`2` (the 0.9.6.3 version comes with this page pre-installed). Content:
[!Ditto? &parents=`2` &summarize=`2` &total=`20` &commentsChunk=`Comments` &tpl=`BlogTemplate` &paginate=`1` &alwaysshow=`1`!]
Showing [+start+] - [+stop+] of [+total+] Articles [+previous+] [+pages+] [+next+]
[[Reflect? &dittoSnippetParameters=`startID:2` &groupByYears=`0` &showItems=0` &tplMonth=`reflect_month_tpl`]]
These are child documents of Blog. There is nothing special about the page. The only fields used are Title, Long Title and content. (these already exist in 0.9.6.3, but I had to add to the code)
Add A Blog Entry Page
This is a child of Blog (it’s already there in the default installation. I just added to it... See below the code).
[!NewsPublisher? &folder=`2` &canpost=`Site Admins` &formtpl=`FormBlog` &footertpl=`FormBlogComments` &makefolder=`1` &rtcontent=`tvblogContent` &aliastitle=`1` &postid=`2` &clearcache=`1`!]
Added:
&aliastitle=`1` - it replaces the date in the URL (by default) with the title of the blog entry
&postid=`2` - this loads the Blog Page after a new post is made. I was getting a 404 error before I put this in the code.
&clearcache=`1` - before this I’d have to refresh the site several times before I actually see the post. With this the site cache is cleared after each new entry, and you can see the new blog post immediately.
BlogTemplate Chunk (replaces nl_blog chunk from one of the wiki posts)
This is referenced in the Ditto call by &tpl=`BlogTemplate`, and is the main formatting of the Blog summary.
1. Go to Resources -> Manage Resources and click on Chunks tab.
2. Then click on "New Chunk" and insert:
<h3>
<a href="[~[+id+]~]" title="[+title+]">[+title+]</a>
</h3> <!-- link to blogs article with it's title (link is title) -->
<br />
By <strong>[+author+]</strong>
on [+date+].
<a href="[~[+id+]~]#commentsAnchor">Comments ([[Jot? &docid=`[+id+]` &action=`count-comments`]])</a>
<!-- link to the article with comments form and comment count -->
<br /> <br />
<strong>Summary:</strong> [+introtext+]
<br /> <br />
<br />
If the chunk already exists, just change the code with the code above (copy & paste your original code and save it somewhere, so that you can always go back to it if something goes wrong).
I couldn’t get the [+link+] to work, so I took it out. I figured since the blog post title is a link, I may do without a second one at the end of the summary.
FormBlogComments Chunk
This formats the Comment entry form. In the original code [!UserComments?...] was used instead. But when I changed it to [!Jot?...] it worked like a charm. If the chunk already exists, just
1. Go to Resources -> Manage Resources and click on Chunks tab.
2. Then click on "New Chunk" and insert:
<p style="margin-top: 1em;font-weight:bold">Enter your comments<a name="comments" href="/blog-login.html" rel="nofollow"> (registered site users only):</a></p>
[!Jot? &canpost=`Registered Users, Site Admins` &makefolder=`0` &postcss=`comment` &titlecss=`commentTitle` &numbercss=`commentNum` &altrowcss=`commentAlt` &authorcss=`commentAuthor` &ownercss=`commentMe` &sortorder=`0`!]
If the chunk already exists, just change the code with the code above (again copy & paste your original code and save it somewhere, so that you can always go back to it if something goes wrong)..
Comments Chunk
This is used by Jot.
1. Go to Resources -> Manage Resources and click on Chunks tab.
2. Then click on "New Chunk" and insert:
<div id="commentsAnchor">
[!Jot? &customfields=`name,email` &subscribe=`1` &pagination=`4` &badwords=`dotNet` &canmoderate=`Site Admins` !]
</div>
If the chunk already exists, just change the code with the code above (and again copy & paste your original code and save it somewhere, so that you can always go back to it if something goes wrong).
FormBlog Chunk
This is used by NewsPublisher and is the form for entering blog posts.
1. Go to Resources -> Manage Resources and click on Chunks tab.
2. Then click on "New Chunk" and insert:
<form name="NewsPublisher" method="post" action="[~[*id*]~]">
<fieldset>
<h3>Publishing Details</h3>
<p>Note: Leaving the Publish Date empty will immediately publish your blog entry.</p>
<input name="NewsPublisherForm" type="hidden" value="on" />
<label for="pagetitle">Page title <abbr title="The title used on the browser window">?</abbr>: <input name="pagetitle" id="pagetitle" type="text" size="40" value="[+pagetitle+]" /></label>
<label for="longtitle">Headline <abbr title="The title used on the article">?</abbr>: <input name="longtitle" id="longtitle" type="text" size="40" value="[+longtitle+]" /></label>
<label for="pub_date">Published date: <input name="pub_date" id="pub_date" type="text" value="[+pub_date+]" size="40" readonly="readonly" />
<a onclick="nwpub_cal1.popup();" onmouseover="window.status='Select date'; return true;" onmouseout="window.status=''; return true;"><img src="manager/media/images/icons/cal.gif" width="16" height="16" alt="Select date" /></a>
<a onclick="document.NewsPublisher.pub_date.value=''; return true;" onmouseover="window.status='Remove date'; return true;" onmouseout="window.status=''; return true;"><img src="manager/media/images/icons/cal_nodate.gif" width="16" height="16" alt="Remove date"></a></label>
</fieldset>
<fieldset>
<h3>The Content</h3>
<p>The Summary field is optional, but is used as a short version for RSS feeds and summary views on the main blog page.</p>
<label for="introtext">Summary (optional, but encouraged):<textarea name="introtext" cols="50" rows="5">[+introtext+]</textarea></label>
<label for="content">Content:[*blogContent*]</label>
</fieldset>
<fieldset>
<h3>You're Done</h3>
<label>Now... wasn't that easy?</label>
<input name="send" type="submit" value="Blog it!" class="button" />
</fieldset>
</form>
<script language="JavaScript" src="manager/media/script/datefunctions.js"></script>
<script type="text/javascript">
var elm_txt = {}; // dummy
var pub = document.forms["NewsPublisher"].elements["pub_date"];
var nwpub_cal1 = new calendar1(pub,elm_txt);
//nwpub_cal1.path="manager/media/";
// If you want the calendar to work from the front-end you need to add a leading slash.
nwpub_cal1.path="/manager/media/";
nwpub_cal1.year_scroll = true;
nwpub_cal1.time_comp = true;
</script>
In /assets/templates/YourTemplate/YourCSSFile.css. Just add this to the bottom of your CSS file. It helps with the output formatting.
.comment {
background-color: #fff;
border-bottom: 1px solid #ddd;
position: relative;
padding: 10px;
overflow: hidden;
}
.commentAlt {
background-color: #f4f4f4;
}
.commentAuthor {
background-color: #ffc;
}
.commentMe {
background-color: #ccf !important;
padding-top: 5px;
}
.commentNum {
font-family: Arial, sans-serif;
font-size: 50px;
line-height: 30px;
position: absolute;
top: 0;
right: 0;
color: #f2f2f2;
font-weight: bold;
letter-spacing: -4px;
z-index: 1;
}
.commentAlt .commentNum {
color: #eaeaea;
}
.commentMe .commentNum {
color: #b0b0ff;
}
.commentAuthor .commentNum {
color: #f3f3bb;
}
.commentTitle {
position: relative;
z-index: 10;
color: #999;
}
.commentTitle span {
text-transform: uppercase;
font-size: 86%;
}
.commentTitle strong {
color: #693;
font-size: 110%;
text-transform: none;
font-weight: normal;
margin-right: 6px;
}
.comment .content {
position: relative;
z-index: 10;
}
.nl_summaryPost h3 {
border-bottom: 1px solid #CCCCCC;
margin: 0px !important;
padding: 5px !important;
color: black;
}
.nl_summaryPost .nl_info {
background-color: #F8F8F8;
padding: 5px !important;
font-size: 0.8em;
color: black;
}
.nl_link {
font-size: 76%;
text-align: right;
}
.nl_paging {
border-top: 1px solid #ccc;
padding: 10px;
font-size: 86%;
color: #618100;
}
#nl_pages #nl_currentpage {
border: 1px solid #618100;
padding: 1px 5px 2px;
margin-right: 1px;
background-color: #9c0;
color: #fff;
}
#nl_pages .nl_off {
border: 1px solid #ccc;
padding: 1px 5px 2px;
margin-right: 1px;
color: #ccc;
}
#nl_pages a, #nl_pages a:link, #nl_pages a:visited {
border: 1px solid #9c0;
padding: 1px 5px 2px;
margin-right: 1px;
text-decoration: none !important;
color: #618100;
}
#nl_pages a:hover {
background-color: #fff;
color: #000;
}
#nl_archivelist ul {
list-style-type: none;
margin-left: 15px;
padding-left: 0;
}
#nl_archivelist ul ul{
list-style-type: square;
margin-left: 35px;
}
#nl_archivelist .nl_month {
font-weight: bold;
}
If you have friendly urls set up with friendly alias path enabled you need to add
<base href="[(site_url)]"></base>
Right after your opening <head> tag in your template.
Conclusion
A couple things to keep in mind:
* Modx will show an error if there are no blog articles, so, insert few articles before testing commenting...
* In the "Blog" page (ID 2), if &parents is not specified, the current document will be used.
* In the "Add A Blog Entry" page, you can remove the &makefolder=`1` parameter after first use for a small speed boost (one less query to the database each time you post).
Resources
http://wiki.modxcms.com/index.php/Basic_Blog
http://wiki.modxcms.com/index.php/Creating_a_Blog_like_in_the_Default_Content
MODX Staff