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

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.11 Add Live Editing Support

One of Bolt’s coolest features is the ability to “live edit”, whereby you can edit records while viewing them as they appear in the front end, rather than through the back-end interface. In this lesson you’ll learn how to enable live editing in your “record.twig” and “entry.twig” templates.

Related Links

2.11 Add Live Editing Support

Hi and welcome to the last lesson in Bolt CMS theme development. In this lesson, we're going to set up live editing for our records. Now what live editing does is it lets you edit your records. Having them look exactly as they're going to look in the front end. So this is how our entries look right now. And if you're editing an entry and you hit Live Edit, you get a screen that looks exactly the same. However, right now, there's nothing to edit, and that's because we haven't enabled live editing in this theme. So we'll just close that down and head into the template file for our entries. And you'll remember from a previous lesson that's entry.twig. So the only thing that we need to do to make a field editable via live editing is to add a dot attribute in the appropriate place in its mark up. So let's start with the title for an entry. So into our H1 tag that's wrapping the information that's being output. We're gonna add a data attribute. And that attribute should be data-bolt-field. And then the value should match the name of the field that you're trying to edit. So in this case we're editing the title so we want the value to be title. So let's save that and try our live editor again. So you see the green line that's now around this title. That means that that title can now be live edited. So you can just click-right inside in. And just change the heading to anything you want. Now to save the changes, you close editor. So what we changed has been taken from the live editor and put back into these fields in the regular editor. So now to do a full update just hit save entry and then we'll refresh our entry. And there's the title that we just edited with in our live editor. So now let's do the same thing for the body text. Let's get back into our code. Find our body. In this case the body is wrapped by this pair of gift tags. So we'll do the same thing again. We'll add our data attribute. And to make it a bit quicker, we will just copy from up here and paste it in here. Now in this case, the field that we want to edit is named body. So we set that as the data attributes value. It was saved once again. And we'll hit live edit. And now the whole body section can be edited. And you'll notice here that we have some editing tools have sprung up at the top here. And if you click into various elements in the content. You'll see the editor highlighting various tools as you go along. So now the only tricky part is that not everything can be edited via live editing. And the reason for that is the only types of fields that can have live editing enabled are HTML fields, text fields, or text area fields. So the title. That's a text field. So that can be edited. The body. That's a text area. So that can be edited as well. But the image field is not any of those things. The image field needs some more specialized additions to it, like the upload button, the select from server button, and right now it's not possible, for those reasons, to live edit fields like this. So that's all of the live editing that we can put in place for our entry. Now, let's wrap up by doing the same thing with our records. We'll copy our data attribute from our title and put it into our records. Heading one tag. And then we'll do the same thing with our body. And we'll save both of our templates. And now in the back end, if we edit any of our other type of records. So let's go into a page. Now, we have live editing for that as well. All right. So that wraps up the very last step for creating our theme. Please join me in the final video of the course coming up next. Where we just go through and we'll quickly recap everything that you've learned. And I'll give you some tips on a couple things you might like to look at next so that you can continue becoming more advanced with your Bolt CMS theme development. I'll see you in the final video.

Back to the top