10 - Implementing the Blog - Part 2

In Part 1 of implementing the blog we got the index page working, showing all of the different content types this blog design comprises. In this portion we’ll complete the job by getting the sidebar categories and archives working.

 
Download the EE Code for 10 - Implementing the Blog - Part 2

The Text Widget
Keeping in mind that the front-end HTML that we’re working with is a template and a bit generic, let’s tackle the text widget on top of the sidebar first. Since there aren’t client requirements driving the design we’re left, as the developer/implementer, to decide just what the heck this thing is, and how it’s supposed to work.

In my early days of using EE I would strive to make every single last bit of text editable by the client. What I have found is that there are some elements in just about every design that are never likely to be changed by clients.  Where I once thought my responsibility was to give clients as much control over as much of the site as possible, now I see it as setting them up for success by making them as efficient as possible.  Every editable element - no matter how implemented - adds complexity to the back-end implementation, and every degree of added complexity increases the odds that none of it will be used.

What does that mean for elements like this?  I start by hard-coding text into the template and let the client know that if it needs to change I’ll do it free the first time. If it needs to change again after that I’ll do the necessary work to make it dynamic & editable by them at that point.

So for now, I’ll just edit this content to serve as a description of what the blog is and how we’ll use it.

Categories
I’ve posted a pretty in-depth tutorial on working with ExpressionEngine categories in the past, so won’t get too carried away with detail here.

First add some sample categories to the category group we created in the last chapter.  Make sure to enter a category description. Now edit your existing content to categorize it.  No need to hit each entry one by one - EE has a built in way to apply categories to many entries at once.

Once that’s all in place I’m using the Channel Category tag to drive the links on the sidebar.  The links will point right back at this index template and by linking to it with category links, the template will dynamically self-filter to show only content in the chosen category.

{exp:channel:categories channel="blog_audio|blog_video|blog_link|blog_quote|blog_post|blog_image" style="linear"}
    
<li class="cat-item"><a href="{path='blog/index'}" title="{category_name}">{category_name}</a></li>
{/exp:channel:categories} 

The style=“flat” parameter is required in this case so that we can add the markup that the Folder template requires.  Without specifying it EE will return the list markup and we don’t get a chance to style it appropriately.

A note on URLs - ExpressionEngine comes out of the box setup to display URLs like:

http://yoursite.com/portfolio/index.php/blog/C2 

Usually that isn’t what you want - you’d rather have URls with the category URL title in them.  You can change that under:

CP Home > Administration > Global Channel Preferences > Use Category URL Titles In Links?

Set that to “Yes”.

This configuration does require a “Category URL Indicator” - which is a segment in the URL that allows EE to know the one following it is a category URL title and not an entry URL title.

With that configuration changed you should be able to refresh your blog template and get category urls like:

http://www.yoursite.com/index.php/blog/category/beer 

Another parameter you’ll probably want to use is show_empty=“no”.  This will prevent categories with no entries assigned to them from showing up on the site.  This parameter keeps you from having to create “sorry, no results found” messages (which you can do, if need be).

Category Headings
It’s nice when the template is loaded in category mode to let users know that in an obvious way.  I’ll add the Category Heading tag to the index template.  This tag doesn’t kick into gear unless the template is loaded in category mode. You may need to fuss with some formatting here but for now it will suffice.

Archives
Don’t let the word ‘archive’ fool you - there is no extra step necessary to archive blog posts in EE.  Essentially each post is archived as soon as it’s published - it’s just a way of putting posts in date-based buckets for viewing.  As such ExpressionEngine has a native Archive Month Links tag that is perfect for our needs here.

Here is the code I’ve added:

<h4>Archives</h4>
<
ul>
    
{exp:channel:month_links channel="blog_audio|blog_video|blog_link|blog_quote|blog_post|blog_image" limit="50"}
        
<li class="cat-item"><a href="{path='blog/index'}" title="title"{month}{year}</a></li>
    
{/exp:channel:month_links}
</ul

Again this code just links right back to the blog index template, but the URL that these links will generate will cause ExpressionEngine to dynamically pull entries from within the correct date range. With that code in place you should be able to refresh the blog/index template and get an Archive URL in the form of:

http://yoursite.com/index.php/blog/2012/08 

What’s Next?
Our blog index is pretty well in place. Well, except for pagination. Next we’ll tackle that and the single entry views for the different types of content.

 

Category Navigation

<< Previous Entry   

Next Entry >>

 

Previous Comments

Picture of Francois

by Francois

Date: Friday, August 17th, 2012
Comment: #1

Thanks for this tutorial. I just start to learn EE, 3 days ago, and everything is getting more comprehensible now I reached this part of your tutorial.
I can’t wait voor part 11.

Thanks,
Francois

Picture of Boyink

by Boyink

Date: Friday, August 17th, 2012
Comment: #2

Thanks - good to know they’re being read.  Guess I better get cracking!

Picture of Francois Morfouace

by Francois Morfouace

Date: Friday, August 24th, 2012
Comment: #3

I’m learning now from your book, but i can’t wait for the next chapter of this online tutorial ;-).
Good book by the way.

Francois

Picture of Boyink

by Boyink

Date: Friday, August 24th, 2012
Comment: #4

Progress is delayed while I work on training for the upcoming EECI..;)

Picture of Susan Kitchens

by Susan Kitchens

Date: Monday, August 27th, 2012
Comment: #5

On your Channel Category Tag in the sidebar, should the tag read style=“linear”  instead of flat?

I went back to the docs to learn more about the style=“flat” and discovered that there are two parameters: nested, linear. (Check it out) Flat is not there (tho it’s mentioned in the next section down, but as a description, not a parameter).

Cheers (& copy edits!),

Susan

Picture of Boyink

by Boyink

Date: Tuesday, August 28th, 2012
Comment: #6

Fixed -thanks!

Picture of Erich Grotheer

by Erich Grotheer

Date: Thursday, October 11th, 2012
Comment: #7

When will the next chapter in this tutorial be out? I am anxiously awaiting it :)

Mike Boyink

by Mike Boyink (Author)

Date: Thursday, October 11th, 2012
Comment: #8

After EECI..:)

Add Your Comment

Commenting is not available in this channel entry.

Unless otherwise stated all content is © Michael Boyink of Train-ee.com & Boyink Interactive. Please don't steal - I've got kids to feed...

dy>