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.1 Preparing for Bolt Theme Development

In this lesson, we’ll begin by getting you set up with an offline environment running Bolt so you can more easily access and update your theme’s files. We’ll set up some default content in your offline site and go through the essentials of how content is organized within Bolt, explaining what “contenttypes”, “records” and “listings” are. Finally, we’ll get you set up with the ideal coding environment for the subsequent lessons.

Related Links

2.1 Preparing for Bolt Theme Development

Hey, this is Casey Bracey for Tuts+. Welcome to the first lesson of Bolt CMS Theme Development. Now, in this first lesson we're gonna get you setup with everything that you need to have in place before you actually start coding, and the first thing that we're going to do is get Bolt CMS setup offline for you. And the reason that we're gonna work offline is that way you have direct access to the files that make up your theme, as well as the files that control Bolt right inside your computer. So then you don't have to worry about FTP transfer with the files that you've changed. And everything is going to be a lot quicker and smooth for you. So start by heading to bolt.cm. Hit the big red download button there and grab yourself a copy of the latest version of Bolt. Now, in order to get Bolt running on your computer, you need to basically emulate a server on your machine. And the way that you're going to do that is using this free software, which works on both Mac and Windows, named MAMP. Now there is a pro version of MAMP, but you can ignore that. You don't need the pro version, all you need is the free version. So just scroll down and hit the Download button. Then grab the MAMP version for your operating system. Once you've downloaded MAMP, just run the installer like you would it for any other program that you're installing on your machine. Then, go ahead and run MAMP. And you should see a little box like this come up. Then what you're looking for is to see that this symbol here has turned green. Now this is telling you that MAMP is currently emulating a server on your computer. If that's not green, then press the button right there and MAMP will start up its service and then you'll be ready to use it. Now, if you have a look at the file path of the fold that I'm inside here, you can see that I'm inside the folder of the actual map installation. And what you want to do is go into the folder of your MAMP installation wherever it is on your Windows or Mac computer and then find this htdocs folder. Then inside that, create a new folder that's going to hold your offline Bolt site. And in this case, I've just named that folder boltdev. Then you're going to copy and paste in the zip that you just downloaded from the Bolt CMS website. And extract it. Okay, so now go into that folder you just extracted. Grab all those files, cut them, and then put them back in your top level folder that you just set up. Now that we've got all of the Bolt files in we're gonna try to look at our newly installed Bolt site. And it's actually not gonna work and I'll explain why In just a moment but first I'll show you how to navigate to your site offline. The site is going to have a local host URL. And the way that you can figure out what it is is by bringing up your MAMP window again, and then just hitting this button here, Open WebStart page. NOW if you look at this URL, you can see that you have localhost:8888l and that is the address that's going to be at the start of any site that you set up on MAMP. And all of this is just the location that this WebStart Page that you're looking at is. So you can delete that. And now, you can just type in boltdev or whatever the name of the folder is that you just set up to install your Bolt site into. And you can see here that we've got an error, so if you see this when you're setting up your Bolt site, don't panic. It's actually quite simple to solve and if you read the error you can see that it's pointing out that the htaccess file doesn't exist. So I'll show you how to solve that. So let's go back into the folder that we extracted. And now, I'm gonna view the hidden items. And what you can see here is we have a .htaccess file and when we cut and paste our files over Ilia, this wasn't taken with us because it was hidden at the time. So now we can just cut that file, and we can put it where it's supposed to be up in the top level here. Now when we head back to our browser. Now everything's working properly. So if you do see that message don't panic. Just look for the htaccess file. Make sure it's put in the right place and then you should be good to go. So now from here, we can just fill in the details in the form that's presented to set up a user. And then hit Create the first user. And then you should be all good to go ahead and log in. And there you go. There is your fully installed Bolt CMS site. So you can dismiss this first alert here letting you know you've been logged in successfully. But this blue alert here, don't dismiss this one because we're going to use this to add some demo content into the site. So that will give you something to design your theme around. So this link here, go ahead and click that. And it will begin populating your offline site with some dummy content. So just give it a little while while it gets all that done. And then, you should see this screen here that tells you that the whole process is finished. You can ignore all of this stuff here. You don't need to check any more boxes or press any more buttons. That's all done. Your content is in. So now, you can click this button up here to view your site. So there is your fully installed Bolt CMS site, all running offline with some demo content in there that you'll be able to design around. Now I just wanna go through a little bit on how a content is organized within a Bolt site. Now there are three terms that you'll want to get to know. One is contenttypes and that's all one word, contenttypes. The second is records, and the third is listings. Now contenttypes is what it sounds like. It's the different types of content that you can have in a Bolt site. Now, if we have a look at the back end here, you can see that we have the section labeled Content, and then below it we have Pages, Entries, and Showcases. And these are the three content types that are set up in a default Bolt site. And to start with go ahead and click this link here, this pages area on the menu. Now you can see that we have several pages that have are already being set up. And each one of these pages is a record. So for every content type in a Bolt site, you have multiple records. So each of these pages is a record, each of these entries is a record. And each of these showcases is a record. No matter what the content type, each one of the individual pieces of content within it is called a record. So if we go back to the front end, down on the right side here. You can see we've got the recent pages that have been created in the site, the recent entries, and the recent showcases. So this display gives us all the recent additions to each of these three content types. But if we click one of these links, now we're viewing a record. So you need to be aware of each of these terms, because the names of the templates in your theme will need to align with the terminology that's used to refer to each different area of content. Now you can also see, if we go to the pages overview, now we have a listing of multiple records under the pages content side. And these displays where you see multiple records at once are called listings. So as we move into creating your theme you'll be creating a template for your listings and you'll be creating a template for your records. So this will be controlled by a listings template, and this will be controlled by a record template. And you'll see a bit more of that in action as we move into coding up the theme. And speaking of coding, The last thing we're going to do in getting you all set up for your Bolt theme development is organize your coding environment. Throughout this course, we're gonna be using the Sublime Text code editor. So if you don't already have that, grab yourself a copy of it from this URL here sublimetext.com/3. And we're also going to be using a couple of custom packages with the Sublime Text. We're going to be using one for syntax highlighting and we're also going to be using Emmet a little bit. So in order to install those you going to need Package Control for Sublime text. So to get instructions on how to install that you need to go to packagecontro.io/installation. Okay, so here we are in Sublime Text, and what you're looking at right now is a template file from the default theme for Bolt. And as you can see right now, it's just got some white looking text, which makes it pretty pretty difficult to read. So what we're going to do is install a syntax highlighting package for Twig, which is the templating language that's used in Bolt themes. So head up here to Sublime Text, go to Preferences, and choose Package Control and then choose Install Package, and now search for Twig. And the one that you wanna choose is PHP-Twig here. So just let that install and then head up to View > Syntax. And then choose HTML with Twig in brackets here. So there we go that's now a lot more readable. And every other Twig file that you have been up will now have that syntax highlighting applied to it. And then we want one more package and that is Emmet. And as you'll see as we go through the course that's just going to make things easier, it's going to save you a bit of typing and give you some shortcuts as we go through. So once again head up to Sublime Text Preferences, package control, install package and then search for Emmet, and then go ahead and install it. And you'll see how we're going to use Emmet we move through the course. All right so that's everything, you're all set up and ready to get into coding. You've got your offline site set up. You've got you demo content set up. And you've got your coding environment all ready to go. So in the next lesson we're going to start actually building your theme. We're going to set up your themes folder structure, add a couple of pre-created CSS and JavaScript files, and we're gonna set up the essential code for your first template file. And in the process were also gonna touch on the basics of working with the Twig templating language, and on how to interact with the config file that comes along with Bolt. So we'll get into all of that in the next lesson. I'll see you there.

Back to the top