Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
FREELessons:13Length:1.8 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

2.8 Create a Record Template

With your “listings” template all squared away for showing off multiple records, you now need to take care of the display of single records, which you’ll be doing in this lesson via the creation of a “record.twig” template.

2.8 Create a Record Template

Hi, and welcome back to Bolt CMS theme development. In this lesson, we're gonna be setting up a template to control individual records. So whenever you go and look at a single entry or a single page, this record template is going to be responsible for presenting it. Now, the listing template that we did in the last lesson is already containing a lot of what we need in our new record template. So we're going to speed things up a little bit by duplicating that listing template. And just renaming it to record.tweak. Now, open that up for editing. So we know that we don't need those headings that we just created in the last lesson. And we actually also don't need a loop anymore either. You only need a full loop when you have multiple records that you're showing at once. We're showing just the one, so we'll get rid of that loop. And we don't need that pagination either. Let's just adjust our indentation. Now if you remember in the last lesson, we talked about how in the listing template, the variable records is already populated by default. Well in the record template, the variable that is already populated is record. So in order for this to work, we need to get rid of this variable article that we used in the last template and replace it with the variable record. So select each instance and replace it with record. And the way this is going to be laid out is we're going to have full body content for our record and then the image for that record is gonna be floated over on the right side. So we don't need this div here anymore. Just get rid of that and fix up the indentation. We don't need the read more link anymore, so I can get rid of that too. And we don't want to format the image in the same way either. So we're going to replace this class that says ContentBox-thumb. We're going to replace that with ContentBox-image. And a couple of extra little tweaks. We don't need to have our heading links because we're already on, because we're already on the individual record page. And then down here, we don't want to show just an excerpt anymore, we want to show the whole body. So replace that with body. And because we're now pulling in the whole body, not just an excerpt, we don't want to have this wrapped in paragraph tags. So replace those with div tags. And now we're just about done. All we want to do is just change the order around a little bit. We want to have this section up first with the category and the date that the record was created. Then we want to have our heading. And then, we want to have the image after that. And that's because the heading is a block level element so that's gonna stretch the full width of the page, which will then push our image down on to the same level as our text. All right so let's save that and check it out in the front end. So to test it out, you can look at any single record. So we'll just hit read more on this one. All right and there is our record template. We've got our category and date up here, our title running the full width of the page, our floating image over on the right, and then the rest of the record. So that record template is now fully complete. And we've also completed our index template and our listing template. Now strictly speaking, we can call our bot CMS theme finished. That will work on any bot CMS site because all the different types of content that are included have been covered. But we're gonna do a couple of little extra things as well. And one of the things that you can do is create templates for specific content types. And the way that you do that is by creating a template whose name exactly matches the slug of that content type. So for example, up here you can see that the entry content type has the slug entry. So if you make a template named entry.Twig, it will control the presentation of that content type. So that's what we're gonna do in the next lesson. We'll be creating an introductory template and we'll be adding some extras into it specifically for presenting entries. So I'll see you in the next lesson.

Back to the top