Displaying Entries and Pagination in our ExpressionEngine Website

I’m embarassed to say that its four days shy of four months since the last article in this series.  Between travel, kids, client work and the holidays, who has time to write?  Well, I am back and have re-read all of the previous installments to this series on BabyFilter.com.  I am happy to say that, other than a few minor changes to my workflow, everything you’ve read still is current and completley applicable to the project.

Way back in September, I wrote in the last article about listing out our Topic categories in the left sidebar of the site.  To refresh, take a quick look at the staging site.

Today, we’ll focus on getting Topics onto the homepage, the main Topics page, and the individual Topic pages.  I spent a couple of hours creating member accounts for all the members of the old site and entering their old topics.  This gives us some nice data to work with as we set up the site. I haven’t brought any comments over yet, so all of our topics will reflect 0 comments for now.

Showing Entries on the Homepage

Let’s quickly take stock of the current homepage code:

Pretty simple.  We’ll want any content on the page to fall between the header_bottom embed and the footer embed.  On the current site, you’ll see we have a boxed in introduction paragraph, followed by a date-based listing of topics, with the most recent one at the top.  We’ll skip the intro paragraph for now and concentrate on the topics.

The first thing I will do is replace the placeholder Content paragraph with a typical ExpressionEngine weblog entries tag.

Some things to note: I have specified the weblog and disabled quite a few types of data in order to speed up the rendering of this list of Topics.  One thing I didn’t include in the disable parameter is custom_fields.  We’ll be relying on quite a few custom fields in the Topics section.

I’ve created a div called topic-list-box to wrap each topic in so that we can style each one as necessary.  I won’t show you the full code from the old site; since it is PHP its pretty long.  But, here is the format we want to get to for each topic-list-box div:

I’ll likely clean up those class names later to make them more appropriate to the data we are showing, but for now let’s just keep them.  I’ll skip the p class=“datehead” date header right now and focus on the topic data.

So, by combining our new ExpressionEngine template with the content from the old site, here is the framework for the div with the static data:

Now, to take this one home, let’s replace the static data with the correct fields that we created earlier:

I didn’t replace every single variable yet, but I did get the basics in there.  You can see here that we are already well on our way:

Categories

I’ve got the title, author’s screen name, date, time, and total comments for each topic in place.  Let’s fix up the categories- right now they all show Travel, as that is the category that I copied along with the rest of my sample topic from the old site. 

The first thing we need to do is enable categories in our entries tag by removing “categories” from the disable parameter.  The new entries tag is:

Now, to display each topics’ category, we need to wrap the part of the entry that displays the category info in ExpressionEngine “categories” tags.  So

becomes

Next, I’ll replace the sample category name:

And finally the link:

Now, with a refresh, we have the correct category for each topic, along with a link to each specific categary page of Topics.

Limiting the Number of Entries

The next thing that needs attention, though it is unique to this situation, is the entries being shown.  Typically, ExpressionEngine will show all entries with a status of Open and an entry date prior to right now.  When I recreated these topics in the new system, I forward dated them exactly two years.  That means that some of them have an entry date of late 2008/early 2009, and some have an entry date after today.  The system is not showing any entries in our list that have an entry date after today.  In order to show these, I will add show_future_entries=“yes” to the weblog entries tag.

That’s better.  You may or may not want this functionality based on the needs of your application.

Linking to the Author’s Profile

Finally, we’ll want to add some if/then code to allow a link to the author’s profile.  If the viewing user is logged in, they’ll be able to click the author’s screen name to find out more about them.  If the user is logged out, no link.  Here is the code we’ll be working with:

We’ll need to change it to this:

This simply shows a link to the author’s profile if the user is logged in.  Note the link syntax; in order to get a slash and then the author_id correct in the URL, separate the path call and the author_id call into separate ExpressionEngine tags.

Linking to the Single Entry Page

Now we just need to update the link to the individual topic itself.  We’ll use the URL Title so that we get readable URLs, so we need to replace this

with this

Very simply, if we have a topic with the URL Title “my_topic”, the link created by ExpressionEngine will be /topics/view/my_topic/.

The Date Header

The only thing left to do is display the date header.  I’ll tackle that, for the most part, in a later article.  For now, we’ll just add each topic’s date above it so the layout element is in place.  Above the topic data, I’ll place this code:

For the homepage I only want to show, say, the 10 most recent topics.  This is easily accomplished by putting a limit into the weblog entries tag:

I’ll throw a link at the bottom of the list, after the closing weblog entries tag, that allows users to read more topics (on the main Topics page) so there is a call to action at the bottom of the page.

So, here is our entire code for the homepage, which is, for now, done:

It’s really quite simple. 

The Main Topics Page

Now, since it is so easy, I’ll use this same code to show entries on the main Topics page.  Right now, the /topics/index template blank.  I’ll first copy the entire homepage template and paste it into the /topics/index template.

To make the main Topics page do what we want, we just need a few adjustments.

• Change the “title” variable in the header_top embed to “Topics”
• Change the “loc” variable in the header_bottom embed to “topi”
• Change the “limit” parameter in the weblog entries tag to 15
• Remove “pagination|” from the disable parameter of the weblog entries tag
• Add paginate=“bottom” to the weblog entries tag
• Remove the “read more topics” paragraph tag and link from the bottom of the page

Save it and upload, and click over to the main topics page and you should see a page identical to the homepage, but with a different title, more topics, and if we had a style for the “you are here” main menu item, an indicator of that.  Really, this is all we need on this page, except for pagination.

Pagination

ExpressionEngine pagination is pretty easy.  I have a pre-written block of code I use for it:

This, along with the changes we made to the weblog entries tag above, places a nicely functioning set of pagination links at the bottom of the page.  Since we’ve wrapped it all in a p tag with a class of “pagination”, we can easily style it later.  The links will update automatically based on how many pages worth of topics are in the system.  You can use the “limit” parameter to show more or less topics on a page and change the total number of pages for the section, if necessary.

Well, I think that is quite enough for this resurrection.  Here’s to hoping I can continue this next week!

Series Introduction
Previous Article in Series