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.2 Basic Theme Setup and Intro to Twig

We’ll get started with coding in this lesson. We’re going to set up the folder structure for your theme and get the essential code in place in your theme’s index template, which is responsible for displaying home-page content. You’ll learn the basics of Twig syntax, as well as how to work with Bolt’s “config.yml” file to set and display information about your site.

Related Links

2.2 Basic Theme Setup and Intro to Twig

This is Cass, welcome back to Bolt CMS Theme Development. In this lesson, we're going to get the basics of your theme set up. And we're also going to introduce the essentials of working with the tweed templating language. All right, so we're inside the Boltdev folder that we created in the last lesson into which we had sold. So now, let's go ahead and set up a folder to hold your new theme. So you wanna look for the theme folder here, go into that. Now this base-2014, that's the default theme for Bolt. So right next to that, you wanna create a new folder and you can call it anything you want, let's just go with custom-theme. Now go into your new folder and the first thing we're gonna do is just setup a couple of folders to hold our CSS and JavaScript. So create a CSS folder and a JavaScript folder. In the source files that you get access to as part of this course, you should find a completed stylesheet and two JavaScript files that you can use with your theme. So we're not focusing on CSS and JavaScript in this course. We're keeping a focus on specifically working with Bolt. So we're not actually gonna be going through any of the CSS and JavaScript development. So what you can do is grab those files out of your source files and then we're gonna just copy and paste them straight in. So here's our CSS file and then for the JavaScript you should have two files. One is jquery.js and the other is rwd.js, so copy and paste those into your js folder as well and then, head back up to the top level of your theme. Now, we can make the first theme file, so this is gonna be a template file that will control our home page. So inside this folder, create a new file and name it index.twig. Then, open that new file up in Sublime Text. We'll begin by just putting in a basic HTML text dot type HTML head section and body section. And because we installed him in earlier, you can just do it like this, just add an exclamation mark and then press Tab. And then, on top of that that automatically added for us, we're also just gonna add in this message viewport tag. If there's anything that you see me copy and paste into this document, that's just to save you sitting there watching me type out every single character. So all of this code can be grabbed out of the source files that you get with the course, so you can do the same thing. For anything that we don't have to step through character by character, you can just copy it out of the source files and put it straight into the file that you're working on. Now, we're ready to take this document and start integrating it with the Bolt CMS. So we're gonna start pulling some information out of the CMS and having it displayed through this template file. In order to do that, you're gonna need to use the tweak templating language. So let's just introduce two of the basic concepts of working with Twig. And there are two types of syntax that you're gonna see quite often when you're working with Twig. One is this, so you have two opening and closing curly brackets and the second is this. So we have the percentage character on the inside instead of the second set of curly brackets. In a nutshell, this is what you're gonna use when you want something to be output on your theme. So you might have something in here that shows that say, the title and then wherever you put this expression here that title is gonna appear in your theme template. Now this second type of syntax is when you want to do something. So when you see those percentage characters you're not gonna have output, you're gonna have some type of functionality. So for example, this might have the opening part of an if else statement and we gonna use both of these types of syntax in our head section. First, we're gonna go up to the HTML tag and we're gonna change this lang attribute to grab whatever the set language is in the CMS. So we delete that and we wanna output something, so we're gonna use the double curly braces and then in between them, we're going to use one of the CMS functions HTML lang. So make space we write, HTML lang and then, we'll add some brackets. And now that's good to go, so that's gonna check with both CMS. What the current language setting is and it's gonna output it here. Now we're gonna link in style sheet that you copied into your CSS folder area. So head down here and just type link and then hit tab and expense that out into the full tag for you. Now here we're gonna use Twig to output the path to the theme that we're working on. So once again, without putting, so we use those double curly brackets. And then in between them, we're gonna have BoltCMS output the path to our theme. So add paths.theme so now in our HTML, that's gonna output the full path to the theme. Now we need to do is tell which folder to look in for a stylesheet and what file name, so just add css/style.css. And then, we're gonna use the same pod start theme expression to grab our JavaScript files. So down here, before the closing body tag, we need to create a script tag. Now at the source attribute and we're gonna use the same paths.theme expression. So you can just copy that and paste it down here. Now this time, we're looking for the JavaScript directory and we wanna load in jquery.js. So that's our first script, you can highlight that whole line. Copy and paste it and then also use it to bring in our rwd.js file. So now, we're pulling in our custom assets out of our theme, our style sheet now to JavaScript files and before we move on, we're just gonna pull in a couple of external CSS files. We're gonna pull in a font from Google Fonts and we'll also gonna bring in the font awesome style sheet, so that we can add some icons later on. So from your source files, you'll be able to find these two lines of card to grab these two CSS files and just paste them right in above your style sheet here. And now, the last thing that we're gonna add into this index.tweak file for now is we're gonna change our title right here. So that it's dynamic, being drawn in from both CMS depending on the content of the current page. And the first thing that we're going to have appear here, is the title of the home page. We know this template, being index.twig file is going to control the home page. That home page should have a title, so we wanna grab that title and display it here. However, for some unforeseen reason maybe the home page weren't have a title. So, we're gonna check to make sure that there is a title before we try to display one. So to do that, we're gonna use those percentage characters that we talked about earlier. So, we're gonna set up an if check, that asks if record dot title is defined. And then, we're gonna close that if check by saying end if. Now you remember in the last lesson that we talked about how a record is any single piece of content, no matter what the content type. So by using this word here, record, we're looking up the information on the piece of content that has been set to act as the home page. And then by adding .title we're looking up the title of that piece of content. And then if this record, this home page record has a title, we wanna display it here, in this title tag. So then because we're outputting we wanna just use our double curly brackets, we're gonna put them inside our if check. And what we wanna output is the records title, so we write record.title. And then just to make sure we don't get any weird HTML characters coming out, we're also gonna add a filter. So we're gonna put a pop symbol and then we're gonna put striptags. Next, after we display the home page's title, if one's available, we want to display the name of the entire site. And this is something that we're gonna pull out of Bolt CMSs config file. Now let me show you how to find that config file. We're here in the top level of our Bolt installation that we've been working in and find the config file, you wanna go into the app folder then find the config folder. And in here, you'll find this config.yml file and you'll be interacting with this config file quite a bit, as you go through developing new themes. Let's open that up in Sublime Text and have a look. This is our site's config file and on line 13 here, you can see that we have this setting named sitename. Now this is where the user of the site is gonna configure the name of their site. In this case, it's set to a sample site, so let's change that to something like Theme Development. And then, while we're at it let's also set up our own custom field but set up a tag line and this already said he that works kind of like a tag line. It's been named a payoff but if you don't have a tag line that feels like it fits, being called a payoff. You don't actually have to use the settings that are already in the config file, so let's just comment that out. And instead let's set up our own field and we'll name it tag line. And then we'll set our tag line, as for Bolt CMS, so then the two together are gonna read as same development for Bolt CMS. So let's save that and we'll go back into our indexed dot twig file and pull those fields in so they can be displayed in our theme. All right, so let's just make a little bit of space. Okay, so the way that we can get the information that we just added into our config file is by using our double curly brackets again. And we're gonna use app.config.get and then, we're gonna put some brackets after that because this is a function. And we can app.config.get to get any of the information that's in our config file. In this case, we're looking to get a general setting and we wanna get our site name that we just set up. So what we need to do is pass a string through these brackets here and that string should say general/sitename. And now this line here is gonna pull in our config file, it's going to find a site name and then it's gonna display the value that we added to it. Now after this, if there has been a tagline set in the field that we just created, we wanna display that too but we only wanna display it, if there's no title available for our current home page record. So we're gonna set up another If check. First we're gonna check if the record title is not defined. So we gonna say, if record.title is not defined and then we also wanna make sure that we have a tag line to work with. So we'll add and app .config.get with brackets and then we'll pass the string general/tagline and then, we'll close that off with endif. So now, if there's no title available for the home page and we have a tagline, then we're gonna display it by adding our double curly brackets here. And then you can just highlight this line and copy and paste it in between you kill the brackets. So now our title tag is all set up, if we have a homepage title, we're gonna show it. Then we're gonna show the name of the site and then if there is no home page title and we do have a tagline that we can use. Then we'll display that after the site name, so that's all the very basics in place for your theme. Now let's activate it and we'll give it a test run on our side, just to make sure everything is working and we're not getting any bug messages. So go back into our config file and then here is where you set the active theme. Now all you need to do is put the name of the folder that's housing your theme in this setting here. So for us, we use custom-theme, so we'll add that in. And then save the config file, so now, let's head to our offline demo. Now if we refresh the page we should see all of this disappear and we should see our blank theme show up. There'll be nothing on the page but we should see that we have the same title showing here. All right, so that's all working, let's inspect the code. So there's the link that we set up to our style sheet. We've got the links that we set up to our external CSS files. And then, in the body, we've got the two JavaScript files that we linked in. So, everything is working just as we want it to be. In the next lesson, we're gonna start adding some content, so that we don't have just a blank index page here. So there's gonna be a few sections that we add into our index template and we're gonna add them in across the course of the next two lessons. So in the next lesson, you're gonna add in the first two of the sections. And as part of that, you're gonna learn how to work with Bolt menu system and we're gonna get in to a little bit more detail on working with Twig. So see you, in the next lesson.

Back to the top