Website Development With MODX CMS | Stefany Newman | Skillshare

Website Development With MODX CMS

Stefany Newman, Web Accessibility Specialist

Website Development With MODX CMS

Stefany Newman, Web Accessibility Specialist

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
25 Lessons (2h 57m)
    • 1. Introduction

    • 2. What is MODX

    • 3. Why is MODX better than WordPress

    • 4. Setting up a server and installing MODX with the MODX cloud

    • 5. Manually installing MODX

    • 6. MODX admin panel (manager)

    • 7. Installing Extras (plugins)

    • 8. Output Hello World with MODX

    • 9. Creating our first template

    • 10. Adding an external CSS file

    • 11. Coding the header

    • 12. Dynamic navigation with Wayfinder

    • 13. MODX Chunks

    • 14. Template Variables - Adding a hero text and image that can be edited from the manager

    • 15. Creating different page templates and assigning a default one

    • 16. Friendly URLs

    • 17. Linking internal pages

    • 18. Adding a contact form with FormIt Extra

    • 19. Finishing the footer

    • 20. Content and resource types

    • 21. MODX Snippets

    • 22. Global variables with ClientConfig

    • 23. Grouping content with Collections Extra

    • 24. MODX checklist launch

    • 25. Thank you and keep in touch

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Learn to create websites with MODX, from beginning to end, with no prior knowledge!

Tired of outdated MODX tutorials? Want a hands-on, practical approach to learning how to master the famous content management system (CMS)? Then this course is for you!

We are going to go from the basics like "What is a CMS?" to grouping data in Collections and launching our very first MODX site.

You don't need to have previous experience with a CMS in order to learn how to work with MODX for this course.

All examples are practical and taken from real-life MODX websites I have built. 

Meet Your Teacher

Teacher Profile Image

Stefany Newman

Web Accessibility Specialist


In my free time, I like to read books (history, historical fiction, philosophy, classics), knit, decoupage, re-watch Star Trek, learn languages (programming and human). I like board games (Go, 1775, Exploding Kittens) and computer ones (Age of Empires, Final Fantasy, Bioshock)  I am also a karaoke superstar :-) 


I started as a full-stack developer - wanted to learn everything from Java to database design. As time passed, I realized I can’t be everything all at once so I switched to front-end development. 


AMP Journey

I had to learn AMP for a project and I fell in love with it. Fast and accessible, and you could build complex websites without JavaScript, which was great for me since I wanted to focus on semanti... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Introduction: thank you for the interest in learning Ma dukes in these cars. I'm going to take you from the bare basics to creating a full fledged mod excite that will be able tow, change the content on the back end in the manager. We're going to start by installing mod ICS. Then we're going to set up a side using the mod X cloud. Afterwards, we're gonna be learning about snippets and chunks. Then we're gonna go to the manager and learn about the back and interface, and we're going to create a website which is a veterinary clinics website, and we're going to publish it for the world to see. This course will take you from zero to hero and you don't need any previous experience with products. If you have experience with what President, this is a great start, but it is not needed for you to be able to create Monix websites. Maddox is one of the most secure content management systems in the world. A lot of cyber security agencies published there. They're the number of sites that they you know, rescued from my wear and wordpress is almost at the top off almost always at the top off infected websites and Model X is at the bottom. One very famous cybersecurity agency released a report that for 18 2080% of the websites that were infected a WordPress and have in less than 2% of them were Model X. I'm very excited to start them its mother's journey with you, and if you have any questions, please don't hesitate to contact think. 2. What is MODX: well. This is a content management system which allows you to build website, whose content can easily be edited to be at the back end or the admin panel. It is also used to develop websites quicker and toe have the content group grouped into article collections. It is also very fast, very secure, allows for greater productivity. It is very flexible. You can create things like personal from personal website with a block to e commerce or online newspapers. There's a great support if you go in with the Model X crowd or there's like amazing Mondex community that is always going to help you. At least they're always helping me. When I asked them questions on the forms anyhow, you might be thinking, What is a content management system? Content mentioned system is a thing that allows you tour, edit the content easily. Let me show you an example. It's a that one toe ad, a few image in this area. What I gotta do is I have to get the image. I have to applaud it via piles era. Then I have to add the I am G attack. I have toe at all the attributes of this tag, then I have to. I have the correct file path through my system, so this is probably going to take in about 15 minutes. Whoever if I use Monix, I would have to do is log into my backhand. Click the page. I want to add my image tour. Then I'm going to click on the easy going them troubled assets template images hero. Then I'm going to click, OK, and we'll have a nice preview to make sure this is the correct image I'm going to click safe. And then if I when I go to preview the site, the images here that took me less than a minute same thing goes for text. If I want any part of this text, who's on what says Best Veterinary hospital if I want to edit the have toe dd html fire itself and let's say that the client wants me to Aditi's file and it is 4 55 So I'm in a hurry to went my my shift and go rest. And since I'm tired because of work today, I make a mistake one of the tax instead of closing the class element. You know, I just leave in the clothes and the whole website looks really, really bad. The client emails me about it, but I don't go to work and you're the next day. So see how this is not like a disaster. Scenarios actually happens a lot like yesterday. I misspoke talk name and I couldn't figure out what they wasn't drawing because we're human . We all make mistakes, especially for a tired if we're in the QWERTY. While, if I make a mistake in the column management system, the worst thing I can do is like the spell worked or something. So it's not yet the work Macron mentioned System also loved group content in a way that is very relatable. For example, I have the testimonies page, and I can edit or delete every testimony. Oh, I can publish an unpublished with the click of a button. But if But if I have like a normal HTM outside every time I wanted to, little far I would have to actually the detonation of my documents. And, of course, the biggest sell for content management systems is a client. They want to be ableto edit their own content, and we're not talking about new pages, although some clients like to do that. But we're not talking, for example, adding stuff like four rooms or e commerce stuff I'm talking about, like eight in your home page, anything, your phone number, anything, your email address, things clients like to treat themselves or they have their employees do it for them, and the reason that before to do it is because it's quicker and it gives them a sense of control. And, you know, you can always rely on the Web developer to change the things as quickly as possible. Even if you hire on agency, you also have to pay them restaurants, money for them to maintain your set. So your problem wondering at this point well, I'm a developer myself. I don't need a condom major system because I can, you know, both my damaged improvise myself. That's true. But like I said before, it is much easier to manage your content with account management system. That said, if you have a very simple site and you prefer to have even more control than it is best not to choose the kind of management system, but it's invested to true something like I start Excite generator. My personal side is built on Jack You. Although I had my previous version of my site with Global Molex, now is very happy. Whoever I have a blogger have testimonials have a part for you. It's not a big site and I can edit my own markdown files myself. So I converted it. Ejaculate. Whoever. I'm really happy. I was really happy with Ma'lik still, and I'm still using some sort of ah content management with Jacquille because I only add Mark them. Fire was supposed to anything. The role HTML and whoever if I had a bigger side then would probably go with Monix because I went old in content to be managed. Also other point if you have multiple people managing your content. For example, if you're making site for marketing agency, they usually are loaded with copywriters, advertising people, Graphic designers You don't want those people missing Operation normal. You don't want them going in the court of your side. It because most most of the time that they have no idea what that meets. So that's why it is best to have a content management system. So even if your site is very small. If multiple people are going to work on it, it is best to use, You know, I see it mess. So in this, in this course we're going, I'm going to teach you how to create this website. It's called for a baby, that hospital. And we're going to go from the beginning to end about how to make your gun, Creedy, with dedicated contact from the Fuhrer and the logo, we're going to be anything content. I didn't new pages, testimonials, anything. You need to have a website up and running. We're going to cover. And the best condom mansion system, in my opinion, is marks. And this is what we're going to learn this course. 3. Why is MODX better than WordPress: The first thing I want to say is the security worth purses and torturously easy toe hack. And a lot of the teams and plug ins have the security, you know, as something that they do last and they do it poorly. Also. What press combines HTML and PHP in all off their files, whereas mod eggs abstracts the PHP so that makes it a little bit more secure in terms off damn plating. One other thing that I after look at its securities dearly infected website platform distribution. They are various famous cyber security agency that publishes their their findings and how help more What percentage of their websites were hacked. I mean, what percentage of websites they had free from being happy. And here we see WordPress at the top. This is a report from the third quarter 2016. You see that 74% of wordpress websites in third quarter were worth price, whereas 0.1 of the hack to upset they had to help with remarks. So you can see how easily it is to have a word for site. This is an infected websites, but from distribution for 2017 we see, this is for the whole year. This is not just 1/4 by one and we see the WordPress is 83% then followed by junior, 13% My gentle 6% dribble 1.6 open card, 0.7 v bulletin burning. That's your thing. And then we have moderates at 0.6%. This this is so little of the websites were model X that is just incredible. And then you see in 18 2090% of the hack websites WordPress and only 0.9% of them remarks. And we just like increase of Monix websites being hacked in 2018. But if you compared to work pressing WordPress, 80% of Web sites were hacked into dozens in 17 and then in 2018 it jumped 3%. Excuse me jumped 7% and that is such an increase. Whereas Mondex jumped in No. 0.3, which is just so little. And I've had a lot off a lot of clients who would come to me and say, Stephanie, I'm sick of my WordPress websites being hacked all the time that switched Marex Or can you recommend a different model, a different content management system and then I recommend biotics or I have also worked on clients on demotic sides, and then the client would have worked parasites in different hosting and then one of the clients. Actually, all of his WordPress websites got hacked on. His other hosting with WordPress sites would ask. The mall excites were absolutely fine. It is also easier to develop in models in December person if you want us to my stuff if you want those stupid dragon drop websites that look after through the same even though your company slogan is innovative solutions or whatever, then you use WordPress have a website up. But the end of the day that's gonna look exactly the same. It's not gonna be accessible, and it's gonna be so easy toe hack. Whereas if I want to create a customizable solution, which is what I like, then with more Brexit is so much easier. Like what? Wordpress. Everything is a plug in. So there is this play in that you can use in WordPress to create a team page and the team pages always. You just put headshots of your team members their names since your description of them. But with WordPress, no people use a plug in instead of spending like an hour according to page themselves. And then what? Let's say the plaguing crashes or about patches is Bush throwing are the plug in h Q gets hacked, and then the plug in makes your website fact automatically. Then it's, you know it makes it so much difficult. Or what if the plug in crashes during development, whereas if you have, like a custom development like it is a more press with exceeding with more? With Mondex, you know it's much easier to develop. It is also family custom, a Zobel. So with Model X, I can have any type of website. I can have a simple website on any commerce website. I can customize it anytime you want and depicting the big problem with presses. That WordPress was is a blogging platform. Okay, this is what this is what it was born to do. This is what they created it for, where us Ma Dix is a CMS content management system and a framer, so you can create ah block, or you can create a custom, a P at whatever you want? Here's examples off some Mondex website. This is a website I created for an artist from the Netherlands and he uses it to update his artwork. He posts YouTube videos on it. He manges his books, He does a lot of beautiful things and the website is very robust. He does all the content, mangement himself and it's funny because in his testimony, he said, Owen Stephanie recommended Model X. I was a bit reluctant, but now I love it because I created this website in May and he has been. He has applauded so much beautiful artwork and it just looks beautiful and he has no problem managing the side. Another side I created was for a veterinary hospital and while they don't have a block but they do have a contact from heaven appointment schedule, they also have. They also have a knee shop. I didn't call the shop, but I did link it and also created a farm where they receive requests for refills of the off. If people want to refill their pets prescription, then they fill out those forms. There's F A Q and the veterinary doctor who owns the hospital. She have date the content herself. Or she asked her employees and the content the mostly, mostly the content. She does herself in the F A Q or the teams. The team member speech. Do you have another website? It is not clear it created, but this is an online newspaper in Scotland, and I want to show you how complicated you can go with model, because this Web site is since the newspaper there, so many tax. There's so many categories. Everything has to be grouped together. The models has no problem. This website has been up since 2014 still going strong, even though the the design is kind of outdated, it's working just great, and as far as I know, it hasn't been hacked. There's a website I created with Mondex using, you know, the content management system for it. MHS Drug source is a very famous dealership in the United States. They have leaderships over the country, and they have on this Web site. They have over 1000 years of inventory, and they want it their inventory to get automatically updated every day. So I wrote in a PR in the crown that of days their inventory every day, and it's been up for. I think it's been up for two years and it hasn't been down because of Model X. The only time the website was down was because with hosting, it's been going great. It's very complicated because he has a filtering system, since the dealership has a lot off, you know, locations across the country. Users can filter by a location by price by pictures. By mileage. It's very complicated, but I managed to created oh using Model X. And then users can also contact the dealerships using contact forms or text messages. Phone numbers. It's possible, another work side of the not creative. But this is an e commerce modest side. They sell perfumes online, and this is a full flash card e commerce side. You can do that with Monix. You cannot perfumes to your car and then you know they go check out and then just receive them. So, yeah, I just wanted to show you how easy it is to create a lot of nice stuff with Monix. So if you want to have your website accessible and you should absolutely, it is easier to do with models other than WordPress because we're president. It's a lot of use this card, okay? And also all of their plug ins have a lot of age team up, and then, since they're playing sound abstracted, it is so difficult to edit the actual HTML because then you have to mess with the beach being if you mess with the page but the 1,000,000,000 crash, it's a whole story, whereas Model X usually abstracts the plug ins and were extras templates. So most the time we can create your own custom templates for Monix extras and not having those extras you know be destroyed by you editing them. Of course, it's more robust because since Ahmad ICS for with Mondex, it's a lot of customizable. Everything is customizable. Everything is abstract. You can always you can always right. You know, Mitch team. If you don't want to use the the systems, you know, template, variables and stuff. And with with WordPress, you have to rely on that. You have to you know you have a block out of the box, and that's the probably poor parts what prices mostly developed. Like I said, it has started as a block a block for people who don't know how the cost. My first block was WordPress because I started them when I was 13. I didn't know how to go. Now that I do, I don't need WordPress. I can. I can have a better, better block with Monix and there's an awesome community. You know, this is the the screenshot from the Mod X Forum, and this is the subcategory for Supporter. If somebody needs their help and see how you have the activity is four hours ago. Somebody help somebody 12 hours ago to 14 hours ago, 21 hours ago. Ma, Texas. Fairly popular, it is not as obscure or some of the other world that's known CMS is, and there's a lot of people who are very they always help each other. And I'm very I'm very grateful to them because they have helped me a lot, and I'm sure they're gonna help you if you ever have any problems. If you go to the models community, the forum, they recently we designed it so it it's much cooler now. So, yeah, you can always find help. So that's nice. And of course, Molex developers save, you know when you go to your doctor. And if you're suffering from high blood pressure, the first question to ask is, Have you been developing in more press? Okay, well, that's how I can think of why you should choose Mondex. All the WordPress I have been developing your press for for a long time when I first started out, you know that that's the platform you start. It's like a rite of passage. You know how actors always start in. Was that show low in order before they go into other shows? Movies So But it's not ideal. And, you know, and I am sure you know about the good work controversy controversy because they they over hold their whole interfacing for content. But they didn't make it accessible. So a lot of people were left out and I was the whole thing anyways, um, help you like this. And I hope that convinced you to start developing and Monix 4. Setting up a server and installing MODX with the MODX cloud: throughout the course I'm going to be developing on the mod Ex card, which is my favorite house thing. However, you can develop on any hosting that you would like. I'm just going to show you how to set up a mark's account. And in this in this video, we're going to be installing Ma dicks on the Monarchs card, which is really easy. But on my next video, I'm going to be doing it manually so you can install it in your arm server. So the first thing I want you to go is go to Model X, that comb, and then I want you to click, sign up for Mondex crowd and afterwards, input your information and select a building parts like the cheapest billing plan. Because the great thing about the Monarchs card is that you can have unlimited development servers with euros and so you don't have to buy domains every time we need to development, sir, which is one reason to love Monix so much and then add your payments on and then I'll see you on the next screen. All right, so this is the home page or your admin panel of the Mod X Cloud and you have various options here I have for organized my sides in groups and on the top, you have your many options. You have new crowd clouds, backups, snapshots. The models cloud automatically backups your clouds every day and keeps the all the backups for seven days, however, are usually change them for 30 days for reciting production. And I just leave them seven days for what sites and development snapshots is when you reuse a template very often. So, for example, if you have a model blueprint, so instead of like editing the same options every day, all you have to do is in your snapshot and then and then start site that can ensure that later on. So what I want you to do is go to New Cloud. You think I don't like about the mother called is that it's the admin panel is slow, the user interfaces and so nice and thetacticsroom little bit to two tiny. But you know, after after using so many horrible hosting, you know, that's nothing, okay, and then you will be greeted with two options. You can either create any marks, installation or create a flexor like it's going to be there. Just got a new crowd will be created with, like no files in it, so you can use it for the ecstatic sides. When install WordPress and Trupo all the washing. You do that when you can Do you know when you have molex. So I want you to click on mod X. We're going be installing models here and here is the name of your club and it can be anything. It now we're going to name is for Baby Marex. But you can just name it smelly socks or something. It's not gonna show up anywhere, but you're more like seven pendulum, so I'm just going to add for a baby Mondex. This is name and at the name of our sides, going just before baby and the location. So input the location where your customers are going to be accessing your side most often for So for example, if you are building a website for an Australian newspaper just didn't Sydney. But if you're building ah website, you know how to find the best thrift stores in America and you're on the Australian and you're building it for an Australian company. Then add the server in Texas, so make sure you have the server where your clients are going to be. So I'm going to use doubts. Texas and, um, the thing that's it. And you can also change. You can also add it to a group. Now this is going to be in group blueprints, but I'm going to want to add it in another group called Development. So they're nice and Daddy. And now let's click, create court creation. Okay, awesome. So our new cloud is currently being created, and you typically receive an email. When that's done, it usually takes a couple minutes. All right, now that our car has created, we have all the information we need. We have the cloud address and the web address so you can use either one of those. You're out the access your side, by the way. Like how cool is that? Then we have the version, which is the mod explosion. That is not the PHP version, so models can automatically installs the latest models version. We have the location, which is in Texas. We have the I P address, which we use later on to connect to real domain. You have created on the day he was created, you know, Then we have our my school information, like user name and password. And then we have the as have to be connected. Excuse yes. Have to be information. You know, toe connected files, you on stuff and we have the name of the group there. We have a couple of taps. So we have the backups I told you guys about. And since I'm developing the side, I usually have it for like seven days. But on live sites, I have it up to 30. And you have a limit of how many backups like you haven't BC If backups are heavy, you know, you're only limited to a number certain number of storage. But the Monarchs crowd is really cool about this. So I haven't had any problems. Snapshots days are not important right now and then domains, you know, right now we're using, you know, the development domain. But later on, this will be not real. The main and then we have Web server. We have here weapons, rewrites and what will these are? It's like HD access. But the server of demonic started using is engine X so that you guys, when I started to fall from, always felt I was just banging my head against the world War. My HD access was working, so they're not using HD access. They're using your engine X, okay. And then you have your robotics troubled 60. Although it used, I think it used to You can edit them here, but just, you know, created troubles. 60. And there we go. Then you have adults that you can, you know, a sell certificates, they provide free, Let's encrypt and stuff So and then you can not your known remains for more money. STN And then my PHP my admin. I usually I usually installed this because I have to actually, let's go ahead and install this because PHP Madden is really good. Good and start location always leave the funny name that I don't try toe change the name Toa ph. Me, my husband because you this folder will be able to be accessed from the web. And we wanted to be, you know, as obscure as possible for defense in depth. You don't want people hacking reciting stuff, all right? And that's pretty much it not recent peach people I use this, whatever my side goes down or if I'm doing from writing, Peach be called and the whole side goes down. You know, I just reset the peach before the pool, and it's fine. So let's view our side to your silence. Click here to view manager is if you want to go into the admin panel. The site now the Model X admin panel is called the manager, so that's clear view side and see how our side looks and their ego. We have installed Molex, and that took like a minute. It's so easy with an automatic and start with Moscow and unlike you know, because usually shared postings will have like no one click was presence told one click, triple and stuff. But they do it so bad they screw up the user permission. So but it's so easy to hack aside whose CMS is ultimately started housing. However, this one doesn't, you know, screw up your side. So that's so Yeah, that's fine. Stand politics, Wizengamot X crowd. But like I said, you don't need the Molex card. You can also install it on manually on your own server, which I'm going to show you in the next video 5. Manually installing MODX: didn't stop Marex. Firstly, Gautama dicks that come and let's go down and find the download Mod X button. You click on it and then Maddox wants us toe subscribed. The new said it. But if we click here at the bottom, then we don't need to. Then we are greeted with the download Maddox Page. And here we have the versions. I suggest to install the latest version. The only time I don't need the latest versions were moving. Ahmad Oxide and the Monarchs are moving is not the latest version. So we have here a couple of packages, just install. Traditional is the one I used more often, and now it's downloading. Okay, Now that mathematics has been downloaded, I'm going to move it to my desktop. It's over here. Download. Okay, So I moved to this zip into the father on my desktop, and now I have to upload it on my server, and I'm going to use files. Your now What you can do is either extracted the the zip here in the folder and then upload all the files of your files. Your or you can upload zip inside files you and then extracted via your, um your terminal, your service. I terminal on your site and it is best to extract it on your server rather than unpacking all the files here and employing the man immune files here. And I'll tell you why. Because this is it conveys all the Monix installation. If we applaud the fire by file, let's say, for example, we're uploading it. And suddenly your uncle starts streaming my little pony in FARC A which shocks the internet and how 1/2 of a file isn't uploaded. And then when you try to install Monix since that if I was missing, you get some weird error about corrupted files and you have toe upload the files over again . But you don't know which for what is. So what the recommended way is to applaud zip. And this is what we're going to do in this store. So somehow go go into the back and terminal and use that and I'm going to use party for this for this, I think. Okay, so this is party and what you could do is you You enter your host name and then you open the session with your back end and then you enter your using them and password, which is what I'm going to do. And now and then you were inside the back end. All right, so and in my host name, my user name and my password, the same as the sftp. Now I am inside the home folder, which is this father Over here I am in the root of my cloud. But, you know, we're just pretending this is a shared hosting. So my zip is inside the www folder. So what I gotta do is type esteem, Www. What s the means is means going to the directory, click enter. And now I'm inside the www director, which is this director over here that we're seeing on file zero connected on the back and via the terminal. What I wanted to do first is I want you to go into Ramadi ex father, and then I want you toe unzip ma dicks inside your computer, and it is not going to result in a loss of files because you're extracting on your computer and you don't need the internet so you can just click extract Ahmad ICS whose and this folder Monix This So we want to open the fathers, and we want you to go to all the fire. So the older files of models are and folders are connectors. Core manager set up all of that. So I want you to copy Dad, and I want you to add to archive. And the reason we're doing this is because when you download model because with a a root directory, you won't be able to exhibit on the server if we use that. So let's change this. Tomato six dot zip and let's zip them up. Okay. Now, I want you to take this zip and then just slide it over to you the root of your side. You can also, and starting a sub folder. But we prefer them the route. Look how quickly it uploads. All right, now that it's applauded, I want you to go to your party, and then I want you to him just first checked during the correct folder. Okay, so we have four dead mnemonics Now. We want to unzip all those all of the files inside the zip and over the first we're going to be D's over here. So let's do on ma dicks. Doug Zip And there you go. It's a fresh our Fowzie. Now the first thing you want to do is we want to remove this. Is it because people will be able to very easily hacker website, So you don't want that And to remove it, just type R M. What? Extensive. There we go now. The next step we want to do is start installation and let's do that. So go to the root of your side. In this case, it's going to have this era. Coat could not load more extra, and that's fine. What you want to do is we want to navigate to the syrup folders. Okay, so in the root of your side, just toe forward slash set up, and then the installation screen is going toe appear. So we want to do choose language, English. It's also translated in a bunch of other languages. If you need them next and, you know, just click next. So we're doing new installation folder and file permissions. They're fine. Okay, um, send exported by Heather, so I usually disallowed this option. What this is going to do is at a special header. So when when the websites such is built with can scan your website and the Heathers will say Okay, this website was built with marks, but we want our website to be secure as possible. So I uncheck this option. Think next here, you want to add in your database type host, lucky name, password, name and the table perfects so just popularly that you should if you don't know what those are, just take a screenshot and email your shared hosting provider or contact your database Me straighter. Okay. I am putting my information now let's click this their server in connection. OK, everything is fine now. The character said I usually do. I think this is the correct one. You can always change. The character said after you have installed theme the decide now quickly creative test selection of you. Okay, so I have Ah, I have a problem. The table perfects is already in use of this database. So what I'm going to do is change the table perfect stew to Europe. You're probably gonna have this problem, but on the try again. Okay. Let me try to the book. Okay. So this is also due tomorrow on. The problem is, I had a previous installation of products in my database, but you're probably not gonna have this problem, so just make sure your data bases empty, but make sure that the database name exists, and then you have toe at the default admin user name. So, for example, let's say our user name is going to be, you know, make sure you use the name is quirky and funny. Don't just at admin because it's not secure. I usually do funny names, like literally characters. Or, for example, you can you can do read ponies, your email. So it's going to input my email, okay. And your password. You know, just make sure it is something secure going to do. 12345 Okay. You this to you? Sure they're the same. Okay, now, let's creek next and here. This is the next to last screen. This is going to check whether all of your server requirements I correct. And it seems like everything is OK, so let's just click, install and pray. We did everything correctly. Okay? That means we're almost them. The core was has been installed. Now we click next and then check this click here to lead a set objective from the first room five system. Now check. They saw that the set of directories leader always make sure you have pleaded the side up directory. Now some shares hosting providers were questioned. For us, we would lead it automatically, so you have to do it manually. But we're going to check for the theater. That's quick. Log in and there we go. So let's let's ah, use our user languages. Read Pope it police and our password and that's Glick. Log in. There you go. This is the impending When we successfully installed website let's Ah, you can goto content review site and you be working with this group. You work with the screen that everything you did was great, and that's how you install marks manually. 6. MODX admin panel (manager): the M impaneling model is called the manager to go to the manager, just type you, you're out and then do forward slash manager, and then you'll be greater with this cream. So enter using them and password. All right, and this is the the first screen you see. This is cultural dashboard. On the left is a list of your pages. And here is your dashboard, where they says, you know, some interesting more These gimmicks and stuff like that you can customize. Is this dashboard by? And so let's focus on the pages. This is the home page, and if I click on it, I get redirected. Toe a page returns title home, and these are the different fields each page have Page has, and we can talk about it in more details later. But basically, this is your title. It the same name also girls in the title tag long title. This can either go into your description tag or it can go. You know it's a subtitle description goes into meditative description into Texas, sort of like like an excerpt of a block post and so on. And here is the content. So if I want to let Let's try toe of your Side, Let's try to change some of the content. So, for example, let's say this line says, instead of you have successfully installed moderates that say, Let make it say something else. So let's go Here, let me go doing this and that Say that's changed the decks to funny carloads eating separate. It's made socks. It was that that seems like a bang on website, and then that's refresh their girl. Funny garroting is Super Supper with smelly socks, and what I did is I press control. Plus, as which is how you can save. Or you can place this button over here, and then you have different different options for example, duplicated lead view close and how, for some reason, I never use that button and know what's there. All right, now let's clean clothes and, uh, save a gambler that I change something. Whatever. Okay, so I'm back on my dashboard here. I have the option to create new new pages. So, for example, it's created new page real quick to do that. Go to new document, and I don't want to worry about templates for now. Let's let's take it easy. And let's say our new page is going to be, uh, sucks. So and the long title was going to be, you know, funny. And Smitty sucks. And this creature may be like funniest socks ever because they smell. And make sure you make sure you miss father description and December is going to be I actually don't really need a summer. This is like optional, and the country is going to be socks, socks, socks mot miss powered better. And before you publish, make sure you click Publish. Because if you click safe can only view this page. Your loved in this admin had remain uses if you want had from a news other than the way should and safe And right here on the left, we have one page home and the other page that we created called socks. No to view the pay discreet of you button. And there we go. Now you might be wondering, OK, Stephanie, why did the title and discredit the content has the exact same template as their homepage. We'll talk about templates that basically the content goes where a specific attack is. Now let's say that this page is stupid, and it's one helper stated inclined. So let's lead it to do that. Just clear the delete button and there we go. It's easy. This is that now, Monix actually keeps your deleted stuff because I'm sure I'm not the only person who gets drunk and related home pages. Okay, maybe when I'm not drunk. But, like, if I started coding before, I had my coffee, you know, I'll do that sometimes. So if you want to unrelated, then just I think there's a book. Okay, on the late. Okay. Right click under late. Terry, go. But let's say I really want to leave this page sleep late, and then if you want to, like the later forever from the face here, just click that trash can button here. Okay? So yeah, OK. Sorry. Figure. Trash can. And then they certainly wanted the lead. And then let me see. Book actions, Birch, select resources and everything except anyone smokes make it so. Got them difficult to the late resources because for being the re accidentally delete something not supposed to have to go and, you know, call your hosting and it's all thing. Now we have the manual to the top. We have content which you know you creating. The rest are so so This is the same is this button that we have produced side which allows you to produce import HTML I never I never used that button. I think it's used if you want to Like in portage. To go to resource is if you have, like if you want to convert an HTML site marks. But what I usually do is meaningful for website has to be converted. Tomato. It's another these same template because templates probably like five years old and never used that import static resources, nephews that easier to service groups. Uh, never used that either. Content, I've This isn't very interesting. This is very controlled content types, and we'll come back to it when we want to enable friendly you our house and now media is when you want to upload your images, videos, all that good stuff. So this is ah, you start like the image your media uploaded that you haven't wordpress and then media sources is if you want to have, like, one folder called Portfolio and then every time you want to play for 40 picks, you know you can choose them from that That felt. Now the installers were in stop slogans and the manages users. So you manage users in their permission. So this is this is my user name. And if I want to create user, just click new user and, you know, you just feeling those those field. Okay. Make sure if you're if you're creating, and I would make sure you you clicks through to use it. Okay? I can't tell you how many times have created a profile and then send up, Send the credentials and people can log in. And, yeah, it was my fault. Okay. And then you have the option of that month. General passport. Let me specify a password. I think you should specify the past because the mother general passwords kind of suck. They're not very, very good. And make sure your prostrating open contain special characters and whatever. And, you know, just don't make it on your mom's name or on your your dog's name. Wherever access permissions is. You know, if you want to limit the access of some users, like if you have, if you give your best friend's access to decide you know what I'm snooping around in some folders and an extended fields. Okay, that's new. Never seen after located later and tell you guys what it is. And you also have some options over here like system settings, and it is really cool. So sometimes when you installed your plug ins and stuff you you have toe, you know, change the settings a bit. And the first thing I wanted to do is I cite name and press and and this is your side name , so I want you to change it to the side name you you have. So we called our side for baby Marex our cloud for by Monix But our side is going to be called for baby So I'm just going to change the name of for baby or Bellary it. Let's change it for baby vet hospital And now every time you use this this tag it's going to output for baby better at hospital And the manager customization is this is where we talked about you can like you can customize your dashboard. So, for example, if you want, like pictures of my little pony or responsible trying up when you enter the back end into that. You know, dashboards. You know, if you want another pictures punch about on your dashboard when you log in, you can also do that. Context is if you have moderate subsides. So instead of like updating one side dating five sites, you just update one and then menus. You can have, like, custom menus over here if you want to him. I usually have the cash button here. Dr. Cemetery used it much, but you never know what kind of client wants, you know, sponsor a picture of their owner, so and then you have property said. And these will talk about later digits for snippets and think chunks not just in its lexicon. Those air. This is if you have bilingual cyber guys like seriously, if you if you If your site has more than one language, just create another side and it have its appropriate the domain, or because maintaining aside with multiple languages on one side is horrible. Don't do it. Just have, for example, have for baby and then have her baby daughter. Well, don't don't actually have for a rebuttal, G, because that because your benefits America have, for example, for baby s dot com or something. And then whenever people click on the the Spanish flag, then they would be rejected Spanish version and next basis. I don't know what it is, Okay, And that's it that we have not help Button. For some reason, they used it because I'm so smart. And I had learned what exit was born Dogmatix. So yeah, that's pretty much it for the manager. It's pretty simple, pretty straightforward. And oh, this is really cool. So, for example, if I am looking for a page and I have, like, 100 pages over here oh, I have to do is like, write the name of the page and then you have suggested truce person that is so cool, especially if you have a blawg and you can keep track of the 5000 block post you brought. This is very cool, and you can also look for snippets and Chung's and everything. So yeah, that is pretty much done. Their manager from from first look 7. Installing Extras (plugins): the plug ins in moderates are called extras. To install the extras, I want you to log into road manager and then goto extras. This is in the top of your admin panel they Canada, however, over and then quicker installer. Okay, and then you'll be taken to the package management after you taken the bag to get management. Over here you have a list of planets and stop now. I don't have any other plug is because it's a fresh in store, but don't install some place, so I'll goto here and don't click. Download extras And here, the most popular ones that we're probably going to need. So we we need the form it extra, which is going to help us create our contacts from. So to do that, you know, between stole one, just the click on download and then it's not loading. Now it's down. Now it's down, down, down, the whole loading. You must install it so you do that. Click gold package management and then the extradition installed, you know, have the install button with green, so click on it and then you'll be taken to a change. Love. Nobody cares about breast set up options and you know, you'll be asked to toe, uh so you can enter your name and email to get priority updates. I'm not sure They they add you to the newsletter, but I usually just keep that because just with them and then click Install package. Now you wait a little bit and then you have the consul. Awkwardness is successfully installed packages packages not system installed than you have in there. But I've never had a package that or on extra, that failed to install. That's how. Also, more exes. I cannot tell you how many times I had stupid got them plugging a work price crash. My whole side and I spent hours the bugging. But that never happened to me and marks. OK, now click OK, And there you go. This is harvest time. Let's do it again. That's ah pic download extras And now the next, the next extra one in stories, the oneto happens be with our menus. Now you can either go to most popular, but you can also use the search. So I'm going to do if way finder and then with the press, enter and I'm going to find it So then I'm going to click Download. All right, standard. But remember, when you download an extra, you have to install it. You have to go back to package management. Click install Go down Creek. Continue. Click OK, and there we go. That's high in storm on extra scene, Maddox. Now, some extras will have extra settings that you can access via the extra drop down. So let's install an extra that has extra settings. Okay, so I installed the crime convict extra, which is what I use in every project. Now, if I go on extras, Okay. So that one other thing is whenever you finish downloading packages, make sure that you clear your cache. So to clear the cache go to manage clear cash. Was it left? Click And there you go. Click. Ok. And now if we go to extras, I still don't get it looking. What? One? Okay, I had to go to Dio to the dashboard. Now if we go to extras again, then we see configuration and this stop was added by client conflict. We also have for Mitt which is the settings of our form it plugging which we're going to use to create our our forms. So if you got the configuration, then we have the menu for the settings. Pretty specific drug. Not all plug ins have settings Page. Just like we need to start. Very simple work. Westbrook in all of them have setting sit there real simple. And that's higher in Stop Wigginton Molex. 8. Output Hello World with MODX: Okay, let's all put hello world with Mondex and let's start coding our side. When you install more X, you have a you have a default template. Now, to find your template, I want you to goto elements plates. And then this is the list of your templates. And what attempt I days is you know how every side has a heather in the footer? Well, the template host Heather in the food and then into the displays the company that's it. So the heather of this site is As you see, we have the header with the head and then we also have the footer and we have all the text that we see on the preview. So what we want to do is we want to create around template. And to do that we have a couple of options. We can either cold here, which I don't recommend, but all we can cold on our own machines and applauded the SS two b. However, what's this by hello world. So what I'm going to do is I'm going to do control, Chris, I lied. Everything save. And then inside the template, I can either say hello World safe I'm saving with contractors s by where you can also click this button. And then let's review the silence called content produced side. And there we go. We have Hello world. Now you might be wondering, Stephanie, why didn't you write how the world here in the in the content section of the homepage? Because I wrote it in the template. Heather Word is going to appear in every single site and we don't want that because we want Heather to appear never single. Excuse me in every single page we don't want have award appearing every single page. Okay, So to do that, you have to go to bay sentiment. No, let's go to the home page and you know everything 70 wise and all that content appearing on our site. Where is their side? You say hello work because we haven't said we haven't told our template to display the content yet, So if I say hello kittens and then save, it's pretty our side. Let's go to content. Let's go the counting preview side and it still says hello world, and you might be wondering, Why is that? Well, the reason for that is we haven't told our template display the content of our page. So to do that you want to go to your content and I want you to to write square brackets and I want you to write a star and I want you to write content, didn't want you to write closing square brackets. And then that's quick, safe. And let's refresh your page and see if it works. And then I go. Hello kittens works, and then let's go back to our home page. And then it's changed. Hello kittens to Hello, sweet kittens Save. Prove your page and they're ago. Hello, Sweet kittens is we can we can now see it. So the magic happened because on our template page, we added this magical thing. Now this is called a modest stack, and you'll be using these a lot. These are sort of like PHP short tax that you would often use in what breast These look like the PHP short tax that you would often using WordPress. However, they're much cooler than that. So now that we output it, hello world and we sort of have ah, a workflow working with Monix, let's try to create our first time played in the next tutorial 9. Creating our first template: to create a new template. You goto elements templates, and then use this little plus button. You click on it and then you give your template the name, so we're going to give it the name for the baby. And you can also give you the description and I come and they here This is the template called. So this is your all your HTML was going to go, and now the only feel that's required is the name. So we can just quick safe. And here we have the for baby campsite and let's let's start calling it like it's normal website. So we're going to start with the HTML tag, and then we're going to add lank attribute, and then we're going to close the HTML groups, actually, make sure you actually write it, and then we're going to start with the head, close the head and, you know, etcetera. However, this is an ideal because we don't wanna be coding in the browser wannabe coding in our text editor. So to do that, let's first take a look at the directory structure of Marx. Let's say it. This is Maddox's directory structure, and this is the this is the route. So the assets folder contains it Contains our front and cold and also contains our photos. The gallery, you know, stuff like that is sort of like the WP slash templates on WordPress. So what I usually do is I go to my assets directory, right? Click like directory, then I by template and inside the template, I add my template code. And this is usually, you know, my template, my actual actual templates. So to do that, let's let's create a directory on our own computer. Okay, So I created a directory for baby marks, and over here, we're going to be developing the template for the site. Whoever we actually need to download some files first, the way usually have it set up is I'm on for baby ma dicks. And instead of downloading all the files here and all the folders like assets connect Connectors Court, what I'm going to do is I'm going to make the assets father or the template for that as well. So I'm going. What I'm going to do is you see how assets have the template, father and inside is going to be our template. So here I'm just going toe at the template and then connected via sftp. No, I'm going to connect my template. And let's call it, for example, base template. Okay. And then have it isn't age demo. Actually, it would be better if I open it up and save it. Is html coming based on play dog page to my let's try again. All right. Awesome. Now it saves his HTM because that's what your templates are there just HTML files. Now what I'm going to do is I'm going to connect this file with SFTP. So I'll be working with V s coat, which is a free It's a free text editor that you can download. So what I'm going to do is open, uh, folder where the base template is. And right now, you know, it's nothing. So I'm just going to do HTM Oh, and h demo five. There you go. So it's a document and them Let's say this is, uh, no more template and dandies will say footer. And here was say, Heather and it's here says, Oops, I am, uh, normal content. All right, so this is our heather for their number. Cardinal content. Then what? I'm going to do is I'm going to go extension, and I'm going to try to find a safety. P. And I think this is the one I have. All right, all right. Now, let's do drop the shiftless speed sftp config. All right. And now I'm going to populate my user name and password and the server name, Toe connect remotely. So before I do that, you see what it says? Remote path. So what I'm going to do is I'm not going to say to say the remote path is going to be route because I want the remote path to go directly under assets template. So what I'm going to do is I'm going to copy here my entire path to my template folder, and then I'm going to copy it over here, and then I'm going to do in for retire. So I want all the contents to go inside this folder. Remember, it's the root of your model X assets template. All right, so we have got next hour a safety pin. I didn't show him my you guys my password because they won't have me. So let's go to our template further. And the district five and Erica are base template is here. So this is our base template. Now, let's try toe, merge it into marks and but recreated the can play That is an HTML file that we connected your safety we could have envious of to be. So we're back it out templates place at our model. So this is the base template that came with the side. So we're going to lead this. Okay, so you actually can relate it because this template is in new. So let's switch that for baby template. And let's lead. The template came with side. So this doesn't like him with the installation, and I save? No, I don't think I did. Okay. When you're changing templates, make sure to actually click safe. All right? Safe. Ellman's then played base template. It's Ah, move. Template. Okay. Oh, dear. Okay. Apparently, the base template is birds coated late in ways. Let's change name of our temporary want off? Let's go to file. Where is the renamed button Care Do base template this to base for baby, then played. OK, now that it's different, let's, uh, open code. Okay, So are the employees called base for baby template. Now let's glue it into Ahmad ICS. Okay, So to connect the template where we got to do is first make sure that our template is actually being applauded. In our case, Yes, it's applauded base for baby template. So this is actually inside the assets template directory. And then I want you to go here and click new template and then use the same name. So our name is base for the baby template, and then I want you to click is starting. You know, what's that's gonna do is you're saying the template actually is a static fire on the file system. Not gonna be entering any code here because I will be uploading in the sftp. And then after you click ecstatic, we need to click here static fire, click this button and then try to find a tablet. Remember, we put our template assets template and there you go Base for baby template off click, OK, click save. And there we go is our base for babies, dams it. And now if we go to home and click view, we're not gonna show anything because we have the for baby tempered. But if we want toe. Make sure that the text that we entered here I'm a hell of a normal continent further shows up on our side. We have to change the template. So we have won the changes instead of for baby. Want to change toe base for Baby Templeton should want change. Template? Yes, because okay. And they would click, save All right. And then we click view Now they're ago says I'm a father of a normal content. I'm a father And this is how we start to develop our website from here. Any change we make, let's like, Let's make a change. And that say, Oreos? Yeah, make sure where this name spelled out two and then s. So I clicked safe. And remember, I connected my fire with sftp. So every time a press safe, the template is going to upload to my server. So let's refresh. Okay. Okay. So our conduct is applying because forgot One more thing if we go to settings, so go to your home page settings and I want you to uncheck catchable because during development you do not want your pages to be cash. Since you were going to be anything them all the time. So under catchable, click safe. And don't worry, we're going to enable this before we go into production and then Goto preview site. And there go, The Oreos is embedded. Now let's do another thing. But that's center donkey. But a fresh it is donkey. There. Here, this is how and this is how you create your own custom templates. Start developing the mark set. 10. Adding an external CSS file: Okay, now that we have set up our template, we have to start coding the heather. But the first thing you want to do is we want to Lincoln Extension CSS file because we don't want to be adding our ceases in line like psychopath. So to do that, what we have to do is inside our directory. You know, I'm inside assets template, create a new folder, and I'm going to call it styles. And inside I'm going to add my sees as far. So what I'm going to do is I'm gonna go back to mine. Text editor. I'm using physical by the word, and then I'm going to do a new file and let's do 40 background gradient. Make sure it works, and then I'm going to go inside styles and say That's called styles. Don't see assess, you know, pretty pretty normal stuff inside here. I'm going to link it, go and to think it. What I'm going to do is I'm going to say acids translate styles dot CSS. Okay, Now let's Let's try to see if we have a bloated out file inside files you are, and the father. Okay, so we have styles and inside Here we have cells that CSS Okay, now that's destine to see if it works, let's go back to our side and let's refresh and it's very red, but it's working and using the same way. You can also invite your J JavaScript files and thus far in bed and this year, says mnemonics. 11. Coding the header: now the cold, the heather. You just work with it as you would called any other Heather, We just the static html code. Now, since I've already called the here that I'm just going to copy and paste it. But first, I'm going to add bootstrap And what? Both shop. It's very easy. You just at it into the into the template and the first to have you both job and have your custom. CSS overrides. I'm going to be making these website with bootstrap even though I hated anything. It's horrible seasons framework. It's for prototypes. I use it. Just what prospects for project? I'm not gonna come live like ever. So because I'm too lazy to be writing my own TSS for prototypes anyway, so added bootstrap. All right, now I'm gonna add my html called, So I'm going to add it here where it says I am a heather. I'm going toe control. Please, Viv. Okay, we're going to save that. There isn't trying to gauge demise because it is a model. Of course not a html CSS one. So what? We're whatever here is we pasted logo, the hamburger menu and the the navigational this navigation static. We're going to fix that later. That's let's see how our website looks like. Okay, it's coming along. Nice thing I don't have the I don't have the logo because having applauded it, which, by the way, let's do that. So what we're gonna do is we're going to go back to our text editor and we're gonna look at the Lago. So logo is inside assets template images low, and that's a good idea. So let's let's create our images, file our images. Father Rather. And that's our images to it. All right, so we have our styles folder now. Let's right. Click new folder, Let's say images inside the images on the created in your folder, Let's go with logo All right and Inside Logo will have to find the Lohan pasted. All right, the law Glee's added. Now let's let's go back to our template control, please, as to upload everything to decide and let's go back to the site. Actually, what we have to do is we have to upload the images folder into our side so that dude is let's drag it up to files. You are all right. Now let's go to the side, then see if it's a voted. There we go. We have our love. And this is how you other local marks logo. And we have our static temp template with our static navigation. What Southern allegation is that means that our navigation we have hard coded inside our coat. It is not generating automatically, but we're running fixed that Okay, so not as we have Dad. Let's check for responsiveness to inspect element. And it's tried, Teoh, you know, sprinted up. Okay. Awesome. Now the A are many is not working because you haven't include any JavaScript, but that's easy to do. But that seems like a great Heather. And you can have, like, the whole side. You can. It can be static if you want. Although if that's the case, then you don't really need marks. 12. Dynamic navigation with Wayfinder: all right. Now that we have our Heather coded, it's time to look at the navigation. Right now it is just a static navigation, meaning that I hard coded the links. But this is not gonna be sustainable in longer. And unless you don't have any menu at all, if it's just landing page, then you don't need a man. You right? So what we got to do is use the way finder extra to make sure that navigation items are automatically created or deleted, depending on whether we created the lead pages marks. So the first thing I want to do is we want to go into our admin panel. Remember the monarchs of men panels called the manager. They want to install the way, find their extra to do that. We want to goto extras installer. Then we wanted click install, download extras and then we wanted type in way finder press enter. And here you have a download button or you press and then respect package management and you start now have already installed it. But this is how you do it. And you might be thinking, Stephanie, why is it that you need the extra just toe. Have your navigation. Why is Maddox making it so difficult for bearing minded? Mondex makes sure that you are is little code. It's possible not every deciding to navigation. It's not like WordPress were just a lot of useless. Co decided for like, no reason what's worked. All right. Now that we have our way, find that let's create a second page. So every every almost every website has more long page has an about section. So it's great Web page called About and Let's Click published and the long dad will be about our team and the description will be we'd love and the moves and he showed or something like that. So we're going to use the base template. Actually, we're going to use the base for baby template. Okay, so this is the template have been working on. Make sure you always use the correct template. Otherwise, you want to your changes and the resource aliens will be automatically generated so we don't need to dio to work with that link attributes this if you need to specifically for this attribute, so I don't think we need any and the menu title. I don't think we need toe barter with that either. So that just save. Okay, Safe, Successful. Now we have two pages we have home and about Let's go to our home page and see there. They're showing. And in Virginia, they're not showing why. Because we haven't invoked involved the way. Find the plug. Let's do that right now. Now, I want you to go into your base for baby template and where when you're where your navigation is, we're going to start coding. So our way finder is going to generate the old for us. So what we want to do is we want to just common this south. For now, We're not gonna need this. All right, let's do this. And we're also inside our naff, so Okay, so we are inside our now here is our hamburger, and we're going to focus inside enough inside the Dave called main navigation and background mammary. All right, so let's clean this up. So the way do you involve extras is you use double square brackets and then use the name of the extra in this case, this way finder. And then if they have any parameters than use the parameters so every time we need that the parameter. You have to use a question mark, then use 1% and the parameter I want to do is start I d. Because zero. Okay, now this snippet right here will generate our navigation, so we have saved it. Now let's let's check it out And what the about page is now being shown and that this awesome. Now let's click on it. So we're currently on the about page, but since the about pages no unique content, it looks the same. But if we go to view page source and we can see that since it's using the same template, it has the exact same coat now we want to do now is let's go back into our template and let's add attack that makes it. Do you know this by the content? So instead of say, I am, a normal content we want to do is use a double, brackets a star and use condoms. All content will be start here and let's go back into our model X site. Let's go back into the now Let's go to our about page in the content. I'm going to say about us. I'm going to save it. And then in the home, I'm going to say Home page and let's save it. And remember, the content is going to appear because we added this tag in our inside. Our template, if you don't have this tag than the constant, is not going to appear. Okay, now that we've saved, let's go and refresh And here we go. We're on the about Page in says about us. And if we go on the home page, it says Homepage. So our navigation is working and I'm really excited about it. Let's let's add a new page so because we're on fire. So let's add new document give. Make sure you save you document and let's so make what our page is going to be is going to be contact us, and here will be I will be happy to hear from you. And the description is going to be contact for baby to have your loved ones reject. All right now click publish. That is very important. And then the content will be, you know, contact this. Okay, that's safe. And now that we have saved, let's go back into our into our template refresh And there we go. How awesome is that? Now, what if we want the contact us to be on the first to do that, we go back into our manager, and then we go to settings, and we go to Menu Index. And here we have this field called Menu Index. Now, the higher this number is, the further back on the menu, the the page will appear. So right now, this is Manu index to which is the lowest hoops. Uh huh, which is the lowest. So this is why the page appears at the last. But we're gonna put it first before home. And to do that we want to do is you want to count how many pages we have. So the first at zero, the second started one and the third started to. So if we want contact us to appear before home, we have to Do we have to ride minus one? Because this is lower than zero, which is home now we save. Let's go back into our page refresh and their ago contact. This is the 1st 1 Home is the second and about visitor. And again, if we want, for example to make sure contact is always the last, like I usually do, just at a very large number. And there we go. So this is how you generate made using mod, accusing the way. Find the extra. There's also you can also generate Sidebottom menus. You can generate a list of articles you can generate. Drop down menus. The list just goes on. It's just no needed for every side. But I'm going to show you those techniques later. Remember, one of the things that bug me with Maddox is sometimes I would try to create a menu with way. Find that, and you wouldn't show up because I hadn't installed a plug in. So make sure that you installed the plug in and also make sure that the pages you create aren't catchable and you know, you clear the cache often. Also before we go, I think I forgot to change is the template for this page. So we want the template to be based. Were baby template. We don't want to be base template. We save and they were good to go 13. MODX Chunks: So let's say we want to create a different template, but we want to have the same heather and food. Er we're gonna do is copy off that crediting file applauded to mod ICS and then every time make changes to the heather. We have to copy and paste, perhaps with the same changes toe hold the templates that need the same heather and further . What if there is a better way there is? We're going to use something called Monix trunks with my ex chunks are they are snippets. They're very you. They're very similar to peach be included your from PHP background. So instead of doing you know, like something like this and saying include Heather, the beach be we're going to be doing something like this that was square brackets dollar sign together and that's it. Our Heather can get included and then all the changes will make in one file will be transferrable to all the files. So let's get started. The first thing I want you to do is let's go to our directory. All right now I want you to click, and I think you button lost button new folder and I want you to write here chunks. Okay, It's important that you name your folder chunks so that future developers would know what they're now. I want you to go inside, and I want to create another folder, and I'm going to name it. Then played Includes. Okay. And inside here, we're going to create our header and footer. So what I'm going to do, I'm going to go back to my V s gold. I'm going to copy the header code, and I'm going to copy it. Then I'm going to create control, please and paste. Then I'm going to go contracted shiftless s, then go to chunks. Template includes. And I'm going to name this Heather thought html There you go. And then that what I'm going to do is go back to base for baby template and the place where I needed the heather to be. I'm just going to put double brackets dollar sign he had if all right, now we're not done because we haven't told Monix where that chunk fire was. So we have are headed here, but it won't show up. So you want to do is go back to the manager. They want to goto elements. And then I wanted to go to Chuck's. And here we have the format, that folder and this one was created automatically by extras. Extras will create folders in the chunks and snippets as well. So what we want to do is we First, we want to create a new categories. I'm gonna create new category. I'm gonna call it Template includes, and I'm going to click, save what this is going to do. It is going to create a new category, but we're not seeing it yet because they're not chunks into it. So what I'm going to do next is I'm gonna go to elements, Chunks. I'm going to click this plus icon. Then I'm going to name my junk header. And in description, I can say Heather of the site that I'm going to click ecstatic. But this is going to say, Is this going? It's going to say to the system, Hey, we have a static document that we want to include. We don't want to add all the code inside the inside the content area of the chunk we want include external, so make sure you click this and then you have this off this import over here static fire than you Click on this icon and then you go toe assets, template trunks and then template includes. And this is the heather that we want, including that we click OK, and then we click safe. All right. Okay. And you see how that called his generate here. Do not edit this cold if your fire ecstatic because we want to be editing the cold in our local machine and pushing it rests. Sftp We don't want to edit anything here because every time we push it is going to override this. Okay, so now that we have saved now, when you save the cash ultimately gets cleaned. Sometimes it doesn't. So always make sure you go wants to clear the cache, and then we want to do is actually test it out. Now let's go. OK, so one last thing we want to add it into the category box called template includes and then click safe. Otherwise, you're chunks for that will get really, really forward channels. That would be difficult to find. It's a whole thing. Trust me. Okay, so let's go to our Let's go to our side. We have the Heather here. Now let's test it out to see if it's showing if I could just find my tab. All right? It's showing. And to test that it's really working. Let's delayed this Heather and pesticide control yourself, and we don't have any head. If that means everything is working, they might be thinking 70. How those marks find the chunks. If they're inside multiple directories, well, every chance must have a unique name. Okay, So make sure they have a unique name and models wars finding you don't have to write out the entire director structure and this goes the same for our foot there. Okay, so we have the food or here. So what I'm going to do is I'm going to copy. Actually, I'm going to create, you know, some kind of code. I'm going toe Copy this, then going toe. Teoh Price contractors and paste the coat. Control this shift Control to shift. This s gonna go to chunks. Template includes. And I'm going to rename this to oops. Food there dot html. Okay, then what I'm going to do is I'm going to go back to my manager elements, trunks and it since we already have we already have chunks in our then but includes director. I can just click on it. And then what I'm going to do is I'm going to right click on these tempted directories and I'm going toe you create a new chunk here which will automatically out the category. Okay. And then I wanted to say for their the name of the junkies footer and the description would be like food there of this side and then is static. And then I want to go find Goto assets. Template, junks, template includes footer and then press. OK, safe. Okay. All right. Everything seems fine and we have the food and heaven. End of it Includes director, which is so nice. And then what I'm going to do is go toe base for baby website and remember, double brackets dollar sign. I hope so. You don't want a doubleheader. We want to have it in the footer and then let's go back to our side. And if it's refresh and there you go. This is how he's template in modern cities, super easy. And all you need is just actually mouth files and you can use chunks the same way For example, if you have a contact form, you can upload it this way. If you have a newsletter that appears in a couple place for something you haven't aside and you wanted to appear in the footer and in your block, just use chunks, do the exact same thing. Just added a new category and you're good to go. 14. Template Variables - Adding a hero text and image that can be edited from the manager: So I put together the hero image with some heather text and some buttons I didn't all statically using their using the template. The card, a code here in my in my PS code is located. You know, we need Heather in my template. We're going to move this cold later in the trunk right now, since Caesar going be developing into template. And then what I did was I I uploaded the picture inside. You know, inside files you and I created a new folder called Hero in Images and they're connected in the CSS. So this picture is a background image and decks here ecstatically made. But what if our client asks if he will be ableto edit the the fixed on the in the manager? Okay, so let's say, for example, that he wants it has different headings, different headlines for his side. And he wants to a b test them. So he he wants to change for three months, and he wants to do himself a to save money and be Nonato bother you because it seems like simple. And after changing text, and this is very easy to do it. Ma dicks, Let's do it right now. So right now, in order to change the text, you have to go through the template and, you know, change. So if it is something I want to say foods instead of who I just have toe, you know, changed a schema. However kinds hate anything edged emotion. You should never allow a client to edit the HTML. It's especially they're not technically said. So we want to do is we want to go to him. You want to go in our manager, okay? And you want to create a template variable. Now, what template variables are there? They're sort of like custom content types that you would do in WordPress. But in this case, custom content types in Modig are built in into them CMS instead. So you don't have to spend to thousands of dollars for plug ins. And to do that, so create the template variable. We need to go to elements, template, variables. And I want you to click this plus button over here. So what we're going to do is let's create a way for the client to be able to edit the front page. So I'm going to call this content this a template variable. Excuse me. Slogan. Actually, I'm going to call it slogan, name or slogan title. This is died of a slogan or, you know, a marketing marketing thing. Like a unique selling proposition of whatever. And then the capture is going to be the headline of the side for the headline of the Side on the home page and description is catchy headline get headline. Now, since we're doing this for a client, it is best to will be is descriptive in the caption and description is possible since you want them to understand very quickly. So now that we have this next, next time we want to go is go toe in put options And what in productions is you were choosing? What kind of imports? Dis template, variables going to accept. So the default is text. But you can also choose to have all attack checkbooks Date email, fire, hidden image, legacy number, radio You get the idea text exterior. So not guess you want to have text and the default value. We don't want it to have any default value right now. We cannot that later or you can have that if you want. Allow blank. This is very good. We don't want this to be blank because if the client isn't enter any text, then it would just be empty. So we want We want people to few end this and then the up with options. I'm just going to set default. So the imports Tex and the default is going and the output is going to be text, so that all seems very good. Now that's safe. We have slogan title here, and the last thing we need to do is template access. So we want to say what kind of template can access this So and we want to say base for baby template. Because this attempt we were using for home page and then we're gonna click, save, and then I want you to go home. This is the home page. I want you to click template Variables. And then we have the headline of this side of the homepage. This is our slogan. And then this is the description. Catchy headline. So the now let's leave it blank and let's have the slogan. So to do that if I hover over the headline, see this? These two tip that appears and you can see double brackets with star and the name of the template variable. So we want to do is instead of this static text being on the side we want to do is lead it and then a double brackets a star and then that the name of our temple verbal, which is slogan title. Then we're going to save and let's test it out to see if it works now. Limit refers to page. Okay, now it's it has disappeared because we have another than text in slogan in the slogan title . So let's ah, um, best with urinary hospital in the area. Okay, so I have saved it. And then let's refresh to see if it appears very go Best veterinary house between here and it is very easy to it's very easy to add it. So this is the This is the living Go to the dashboard Is the dashboard Never. I didn't go home template variables and this is the headline. So let's say that the the client wants to added this. He wants to added the subtitle as well. So what we do is good elements, state variables, and then what? We're gonna do. What we can do is I can create a new category and let's go it home page datum game. So it's more need and died, and then I'm going to click on slogan title. I'm going to go category home page data safe. Okay. And now I can open complex data I can right click on it and then click create a new TV here . Okay, so the fabricated for template variables, this TV has nothing to do with the thing that you watch friends on. Okay, so now we're creating any template variable, and I'm going to say slogan, subtitle and then we can say supply. It'll of the slogan appears home page. Okay, The caption in the description is not gonna be seen by the front. And this is only for the back end purposes categories home page, datum. And then we have the in put options is text and we can allow it blanks because it's not that big a video if they don't have any subtitle. The important thing is that the hero image has style and then template axis. We want to save base for baby template. It's very important to assign to assign the template Very books. A template Because if you don't, then you won't be able to use them. So the name of our slogan Subtitles slogan underscore Subtitle So you know the drill. In orderto at any dietary, we need to go to home template variables And here it's a sub tater of the slogan And that I was just going to based this Save it. And then over here, we want to do double brackets. Star slogan died. Oh, okay. Hopes. No. So just repeat it on the both and we don't want that slogan subtitle There we go. And now, if I go to content So now that we have saved it, you forgot the previous side. There we go. It's It's a similar text. But the big theme the difference here is that the client can actually review. They can actually edit that text themselves. So the last thing we want to do is the client asked if he can change the picture themselves . Now, this is very often a request. If they have an e commerce site, which, yes, you can do an e commerce with wordpress. Excuse me? You can go R e commerce. I with Monix don't do it will work for us. Here's an example of a hero image that gets constantly changed for us for this e commerce site, since they have new launches and new sales almost everyday, they change the hero image every day and they link. It is also a fact left click here or get predicated this collection. So let's do this. Let's some allow the use the client to change the picture. So what we did hear how he added, This picture is I added via the CSS. So I added, you know, background imaged in your Grady end, and then this is the Europe. So since we were no longer since, it is not possible to add the image via the CSS anymore, we're just going to delete this, and what I'm going to do is I'm going to go to the base for Baby Dempsey. Then we're going to test the website, so they made sure to disappear there ago. And then what I'm going to do is where it says Jumbotron. I'm going to add style and I'm going toe add a future template variable, which is going to be hero image. Okay, so If I go to my site now, it's blank because I haven't added here image yet and create the hero image for me to go to Elements Home Page Data Right Click. Create a new TV here. Remember TV's abbreviation for attempted variables. The name will be hero image there. Main Image home page and then the input book Options are going to be image, all right, we don't want to be text. Obviously, the out production is going to be default is just going to be the euro of the image and then template access base for baby template Safe. Now let's try this. Let's ah so the next thing I wanna do is applaud our image. Let's go to home template variables, and they regard the main image of the homepage. Okay, so I'm browsing from my computer and I'm selecting the hero image peeking open. And to browse the picture from your computer, you have to play a press, This button the arrow. Otherwise, if you already uploaded the image of you, if I was your than you could just find it out here in the past. Then, after I pulled the image that you have to click upload. Okay, now it says, upload successful. And but this going to do is it's going to upload it into the root of your site if you want to applaud it into a different place, What you can do is go to assets template, images, hero. And then, after you have clicked this directory, then you press this button and then you upload and then you upload the image of it. So let me click, OK, since I have already uploaded and then we have now we have a preview of our image. It's quick save. And now let's preview to see if it's appearing. So it is not appearing because the reason is see, I added the style, but I only I didn't at the background image style. So let's do this right now. Over here, have style, see? But I did not add background image, so I'm going to do background image and then I'm going to say euro all right, and then, all right, so what's this is going to do is go and say, Get the background image generated by the then played variable in this case template Very. Bush is going to be a your of the actual image. So let's save this and it's tested out. Let's go to our site and click at five. And there we go. The website is working and the the template variables were working. And now every time, any time the client wants changed image over here, they have to do is go to home, plead variables main image of the home page and then just click here and then uploaded from his computer. Already he can upload via fire zero and their ago. This is how template variables work. And this is how you can make your website very, very edible from the back end. 15. Creating different page templates and assigning a default one: Okay, so right now we have one template for all the pages, and that's fine if we have a simple website. But since you're using the same template for all the pages, every time we go to a different page, for example, I'm on the about page. Now we have the same content, and if we go to schedule an appointment, we also have the same content, and we don't want that. We want every template to have header in the food, and then we want to have a specific content. However, some pages are more complicated than the others, and this is usually the case for the home page. The home page is usually very unique and contains, you know, components that are necessary used in other pages. So what I usually do is I create a special template just for the home page, and then I use the default template for the other pages that are similar. And then I used a specific template. If I have that, I could really complicate the other page. So let's do this right now. The first thing I want to do, though, is what it is. We have the Heather in a different fire. Whoever Heather contains only the Heather, You know, the actual heather code. And I want the head to be a separate file as well. So what I'm going to do is I'm going to copy that the head and the doc type and stuff. So what I'm gonna do is I'm going to copy, contract this X and then get me into my password. Then what? I'm going to ask. I'm going to go control purchase and controlled his V contracted shift. This s I'm gonna go to trunks. Template includes, and I'm going to say head the HTML. All right. And then in the base for baby tempted over I'm going to do is I'm just going to do this head. There you go. That's all there is to it. And of course, I have to also go now. Forget that We also have to go to our manager elements. We have to go to him. Junks. Template includes right click creating your chunk here. All right. And then we're gonna named Chuck. Head s static. We don't find I'm gonna go to assets templates. Junks, Template includes head. Okay, safe. And there you go. Okay. So that's it. That's pretty much, uh, that's pretty much it. This is going to be the the body of our of our side. And then what I'm going to do is I'm gonna do it. Oops. I'm gonna have main, and then I'm going to give it a 90 off content did. Now, this is not the idea of content is not the styling purposes. This is in case we want to create a skip link for accessibility. All right. And that's that's pretty much it. So this all the cold I'm going to be writing here is going to be unique. So what I'm going to do is I'm going to a copy of this and then go control pris s. I'm going to go control plus U s. And then I'm going toe creating new templates. I'm going to create home page template. I'm gonna press safe. Okay, So this is the home page template. Then I'm going to go to my manager elements templates, and then I'm going to add it. Create new template. Same name, home page template. Ecstatic. Yes, static file. Find a static from assets played. And then since the template files are directly underneath the template. Further, I'm going to choose home page template. Okay, Save. And the last step we need to do is go to resource is home. They want to change from base for baby template. Do home page template we want is click. Ok, all right. And that's it. Now we have the specific temp home page template that we want to do is we want to find our We want to find out normal templates. I'm gonna go control Cris Beam based for baby template. I'm going to delete the jumbotron because the Jumbotron or the hero is only going to appear on the homepage. We don't want to appear in any other pages. So if we want the hero to appear in every other page, where we got to do is create a trunk and then copy and paste. So I think that's a pretty good base for our side. We have the head Heather hooter and accounted in the center. So this is the base for baby template. So what I'm going to do is safe. Since we have already added the base for baby template here, we don't have to add it again. Then I'm gonna go to the about page. Okay? They changed a temple's. Remember if I had save? Actually, he'd save when changed them. They didn't Going to go to the about page, and I'm going to Actually, I don't need to change. I don't need to change anything because we want to change that one. OK, so we're going to get safe. Okay, one nesting. We're gonna go to him. Template variables. And here we have the hero image. Okay, but for a template access, we made it to the base for baby template. So we don't need that anymore. Because we have changed the base for a baby template to the homepage template. And we want the hero image. Don't appear to the home page template on the home page page. So we're going to add it to them. How? Bait. And then the slogan. We also wanted to be on the home page, not on the base template. Then the slogan title, Same things. I'm gonna go then played axes on Chek Chek safe. Okay, Awesome. Now D the home page has older. The information here has the homepage template and the about the about page does so Let's do the about page in, see if we alright, Awesome. So if you go to the home page, we have the hero And then if you go to the about page, it is just standard and then schedule an appointment. It is also standard Awesome. This is what we wanted to do. Now you might be wondering. Okay, so the next thing we want to fix it. If we create a new document and let's create the services page, then every time we have to go here and change it to the base for baby template, that is in case, you know, the services is very simple Page. It doesn't need any special gimmicks. So we have to do that every time. And this is kind of annoying. Whenever we installed Model X, we came with a default template and this is called base template. However, now we have base for the baby template and we have homepage stamp it so we don't need for baby and we don't need base template. So what we want to do is we want to say OK, every new page I create automatically at the base for baby template. I don't want What have you got manually? You know, because you know, I want things to go quickly. So what we got to do is we want to set a default template. To do that, we go to to the wrench Aiken click system settings. So thank you. And by default template. Okay. And then here in the valley, we want to add the i d of the template that we want to be default. So, for example, the base template side is one. And then the base for babies template this Tracy the number. Next. The template is its i. D. So what we gotta do here is go. It's changed the value from one through three or whatever. Your default templates ideas and changed to 10. Change them. It's very just click on there, and then you have a drop down. OK, so it used to that you have to add the i d. But now you can just choose the template, which is really cool. So I'm just gonna change it, tour face for baby template, and then just click and it's it's done. Then I'm going to clear the cache. All right? And let's create a new page let's create it's quickening document, and it's going to be just going to be testimonials. And Erica, the base for baby is automatically added, so we don't have to worry about that. Awesome. The next thing I wanna do is delayed the base template finally, so I'm going to right click remove template we don't need, and we do need to for baby template. All right, try to keep your files clean because you know otherwise, it just a lot of drinking a database, and it's more difficult for you to navigate the site and that that's that's pretty much anything. So if you go to the home page, we have the home page data about has Deal services, testimonials. It's owned their own pages, and we're good to go. 16. Friendly URLs: Okay, so at this point, we have a couple of pages. We have the home page. That is the page the users lands on. Then we have about services, testimonials and schedule an appointment. However, there is one thing that's missing. Whenever I click for example, services, I get this weird euro in the beach. Be question Mark I d five now, the question mark in the ID equals five. This is called the Query String. So since our CMS is based on PHP, we generate the pages on the fly rather than have them in HTML files if, as if it was a static fire. Whoever this you a route is not user friendly. It is not s your friendly and it is very confusing. And another thing is, it is also uninviting. And people might think that your side is some sort of scam because if it doesn't have friends, EU arose then people might think it's a virus or something, and that you might be wondering 70 How come this is the case? Since we have aliases inside every single page we make, why isn't the system using the aliases? That's because we need toe. We need to enable something called friendly euros. Well, that would make is instead of having this weird euro index of Peach, PICO Street, I wanna have it like this about or whatever the alias here is in the pages. All right, Now, there are a couple of ways to do that. The first thing you have to do is determine your server name. Actually, the server engine, whether you're on Apache engine X or at some other service. If you don't know your server, send a ticket to you shared hosting provider. So the most common servers with shared house things, especially is Apache. So the first thing you want to do is headed our HD access fire. So if you're in the patch in and Apache has been configure to use 80 access, every installation of models come with in hee access for, however, it is renamed HD dot access. So this makes this file no real actually access. So what you got to do is click right click and then click rename or you can press F two and then rename is from HD dot access to a doctor HD access and click and click. OK, and that's that's how you do it. And then if you right, click and let's open with V s code and try to edit it now, ma dicks, by default brings your HD access fell for with goodies and in order to enable frenzy euros . You really don't have to do anything because this thing has already been done for you. So you have the right engine hungry, right base. This is the route. Now, if you're if you're in stock models and so forth and instead off example human solved. Melikson, The monarchs of directory should have it like this. And then if you go down, you have thistles, the friends Eurosport. And as you can see, it's already added for you. So you have to do is rename your HD access fire. And then you also have some other information and some other options. So you can you can browse the mature Sometimes it's not important right now. So now that we have renamed R H D excessive, I'll make sure you uploaded via your files. Sheila, I can do it because my end might my surgeries engine XO HD access is not gonna work on me. Okay, now that we have enabled rht access. Let's go to our page and see friendly euros are working and they're not. Now the reason is even though enabled rht access. Where we get a do is we have to go to the dashboard and then we have to enable friendly your house. So let's do this right now. Go to your manager. They want to click on the wrench icon system settings and inside here. Where to search breaking. I want you to write friendly press, enter and then you have a cup. You have some. You have some options for friends. Your us, but we don't need to attack a with any of them. Right now. I want you to go and then next to the last option called Use friendly euros. See, the default is no, but I want to double click on the no and then you have dropped on and there click the no to yes, and then just click away. It automatically be saved that I wanted to go to manage clear cash first. OK, and now let's test it to see if it works. And now let's go to the about and we have about the HTML which is much better than the idea . Think so? Now you might be wondering. OK, Stephanie, But how? Don't remove the dot html extension. So to do that, we have to go again to him. We have to go to the manager. Then we had to go to content and I want you to go the content types and then where it says HTML, I want you to double click on the extension and then just remove it. Quick answer. Then I want you to go and clear your cache Press OK, preview site. And there we go. We have when I go to the about, I have services and then you know about have the about and services have services. Testimonies. Now these are friendly your house and that's how you enable them in marks. Now, if you're on engine X, if you want engine next, then you have to talk to your system administrator to enable friendly your else or, you know, send a ticket. But I've never seen a share hosting with engine next, but just in case they are, you know where to send them a ticket and they'll explain how to do it to you. Now, if you're on the Monix cloud friendly euros are enabled by default. If you choose the Monix installation now I'm on the model Scout, so I don't have toe tackle with my engine X settings. I just have to, you know, go ahead, enable friend your house via the system settings and then go to the content times to remove the HTM extension. So that's how you do it. 17. Linking internal pages: our home page. You have linked internally two pages schedule an appointment and view services. And we did it using HTML and we hard coded values. So this is our buttons, and I have just hard coded de pages. So if I click on schedule department to go to the contact page and if I click on you know, if your services to go to the services page now, this works well for now, whoever it is not very dynamic. What happens, for example, if our client decides to change the name off services from services to our services and he wants the you're the U. R. Rao alias to be our dash, our that's services. So what's gonna happen then, is if we go back to our side and we click on your services, we're not going to go to the page, which is gonna get a photo four. And that will happen every time we change something about our pages, we're gonna have to go and manually, you know, you have to go in manually, change it in our back end. So the way, the way tow, avoid this is to use automatically generated pages And what what to do now is so sinking, for example, we want to link view services. So what we're gonna do is inside the A trip, we're gonna do double brackets, and then we're going to say Then we need here is we need the i d of our document. So we're gonna do there is go back to our manager. And since we want to link the services page, we tried to find its idea, and the idea of each page is right next to it, so parentheses five. So the idea is going to be five. So let's go in certain average demo and what I'm doing here is using a template tack. All template tags and moderates are with double square brackets. But instead of using the start like with before, I'm going to use this character also known as the Tilt. And then what was the idea? Actually, that we're trying to use me, Okay, five and then going to add the i d of the resource. In this case, it is five. I'm going to press, I'm going to press control plus s. And now let's refresh the page and try it out. And there you go our services, and then we're ready to act it here. So if we want to, for example, change. Sorry. If we want to change this toe, another alias. So, for example, feel on the changes from services from our services that your services impressed safe and then go to the home page and refresh, then it automatically changes the areas, and this is really good. But another use case for that is if you want to change the content types, of example, not right now. Our services content type is just it just normal page. However, what happens if things that the client decides one day to a change it from a normal page to a pdf, you know, outlining services of a veterinary clinic? So what if they, you know, go ahead. And but for the pdf, then we have to add content. I Pdf, and then the areas is going to automatically change to services. The pdf we're getting another because we haven't actually uploaded the pdf, But that actually happened to me a long time ago. The I had, uh I had a financing page that was a pdf, and but they wanted toe convert it to an HTML from So I had to change content on from pdf two html. But since they used the template tags of Model X and you have to change things and there were a lot of links of the of Dean financing page over the site, but I didn't have to use any of them. So yeah, that's how you generate links using marks the template tax. 18. Adding a contact form with FormIt Extra: Okay, so one headed nodded some more info in content to the side. I added a list cuckoo maps outside of the contact from and contact information. And I did it. I hard coded all of it in my homepage template via and no HTML. And that's the beauty of Model X. If you don't need something changed, you can just cart code it and this will make it much more fast. Was making, say website faster, like a little bit? It might not make much of a difference, but we have a lot of time because making things edible from the manager is a very error prone. And this is the beauty of Marex. Because WordPress almost everything has to be eligible from the admin panel, where with Ma dicks, you don't have to. You only make it creditable if it really needs to be so. We want to make this. We want to make our contact form. What? Because every sightings have a contact for so to do that the first thing you want to do is install on extra and this extra is called Form it To do that. Let's go to extras installer. And then I want you to go to download extras and then we're going to search for it. And then we're gonna press enter now, voted installed it. But you're gonna have a green button where it clicked, download and then install. So now that we have installed this this extra remember from our previous extra, every time we install extra, we have to involve invoke it in our temperate. So to do that, we're gonna go back into our template and I'm going to invoke this extra. And to do that, I'm going to use a template, Ahmad X template tag. Remember, Mondex template tax always started with double brackets. Then I'm going to use the name of the extra. In this case, never extra is form. It's I'm gonna write form it. And since I'm in, since this head this as parameters, what I'm going to do is where I'm going to do is add a question mark space, and then I'm going to add to the first the first parameter, which is called Hooks and then I'm going to make equal sign back takes very important those air back ticks. They're not quotation marks. And then the first book is going to be right now. What's that's going to do is what hooks does on form. It is they They're like inner plug ins wouldn't deploy. Um, So, for example, you can have hooks like but a cop, chum, or you can have that custom hooks. So what we want to do with our hook now is we want to make sure, whenever dear, the user, whenever the user has admitted the farm, we want them. Toby redirected to a thank you page, which we're going to create later. So we're just creating our baseline here now, the next the next parameter wanted to. And you can also staff parameters one above the other, actually before this, because it makes it more readable. So the next parameter is going to be email subject. So I'm going to do 1% female subject. ICO signs back dicks and going to a new message from for baby hospital. Okay, then we want the 2nd 1 is to be 1% email to and those parameter names. I'm not just pulling in amount of thing, they're thes. You can actually find inside the documentation, so they're very specific. And make sure that you use the parameters providing documentation you just make You're not just making them up because it's very important to just brought them correctly. So email to is going to go to my web. My knowledge, Which is Stephanie it email that Newman. Stephanie, make sure that you would spell your email address critically. Because I've had a lot of times where I didn't. Because having had my coffee yet some and they were going to email from and usually do something like boss master at no reply dot com. And then then we want the user to be ready directed. So we're going to say, ready wrecked two, and then this is the idea of the page with the use of red erected. So let's create this page, okay? Seeing eye right here, I misspelled this parameter name It is. Trey wrecked up the letter. Okay, so let's create the page that we need to be redirected. So I'm going to go to a new document, and I'm going to say thank you for your submission. This is the name of them, and then I'm going to just add it Way will get in touch with you. This all right? now I'm going to have publish, but I'm going to add hide from many is why we don't want people to just land on this page from naff bar because it's gonna be uses for them. Just pay to only be shown. If the user has successfully submitted from our conduct for and then our our temple is gonna be based base for baby template. That's fine. I'm going to click save, and then we're going to get the I d of our page and remember the ideas of all your pages, right? Next name in parentheses. So the idea of our page is seven. So I'm gonna go back to my content, go to my text editor and remember the idea was seven. So I'm going That the idea which itself? Okay, everything seems great. Now, Now we have to test out form. Actually, before we test the form, we forgot one important hook and this is the email hook. So I'm gonna go into my hope parameters. I'm going to write e mail, and then I'm going to type a comma and then space. So what's gonna happen is you change your hook. So we want to say OK first on the email and then redirect to the success page. Otherwise, if we had something like this, redirect and an email will be like first resurrect to the success page and then and then emailed conduct from submission. But the widow, That's not what we want. If we have an email and then redirect back, okay, if you fail to submit the form, don't ready drive to the next page. And this is how hoax work. And you have to specify the email hook because you might want to have a form that you don't necessarily want to email to anybody. You just want people to feel in, and then you can check it on your site. Okay, now that we have saved, let's go ahead and start form, I'm going toe really fresh, and then I'm going to fill in this form. All right, now, let's click. Send Okay, now. We already referred to the thank you page. So afterwards is go back to the to the home page, and then let's go and check our email to see if we have received the email, which is sent. So I'm going to refresh here, and sometimes it takes a few minutes. Okay. We received this email. One thing I forgot to tell you is make sure you add the an exclamation mark in front of your snippet for former. This will make sure that this snippet isn't cashed. So now that we have received our email, let's open it up. And this is the This is the message that we have received. So what we want to do now is now this this message is good and all, but we could make it prettier. What the what? The message. What the form it out, metal. It does it. It goes in. Search is your form. And then it uses the names through. The name is message in the name of the email is email and damages based them here. But what if you want to have, like, a custom template? So to do that we gotta do is let's go back to our side. Okay, let's go back to our manager and then let's go toe chunks, new chunk. And then I'm going to call this junk email underscored TPL. So this will be template of the contact form and inside here, we're going to add some code, So to make it clear, so you can also have a de static if you want to. But I don't think I waited this very often, so I'm just got back My cold here, so I don't want to do is first of all, I want the name of the person to be both. So I'm going to add the strong tax and I'm going to add email Colin and then below that in the paper, I'm going to add a new paragraph and then I want to add the value of the email submission. Now, since the name of my email is email So this is the name I put in my input for my contact from what I'm going to do is use Mondex template tax, which is double brackets. And then instead of a star, I'm going to use a plus. Where plus sign is this is a placeholder. This says okay, so expect ah value with this name and extract the value. So I'm going to add email and then I'm going to do the same thing with message. I'm going to type strong and then I'm going to write. Yes, it Oh, you cannot anything you want. For example, I cannot visit tourist message and then belong that I want to make a new paragraph. And then what I'm going to do is I'm going to double brackets plus sign message. Okay, So if remember, we're getting the the name of our input. So if this if you change the name message Teoh message 12 then I have to change this message 12 as well. But since decisions message, then it is a religious. It's fine. So we're saving it, and then we copy the name of our trunk called email o underscore TPL. Then we go back into our form it cold. Then we press enter, and then we need to add new parameter that points to this template. So I'm going to is at 1%. And then what I'm going to do is use a special parameter called email t p o. And then equals back ticks and the name of my junk called m o Underscore TPL. All right, all right. Now that you do it, let's go ahead and test to see if it's working. Let's go back to our home page. Go down here, feel into form, okay? then it's press emit. Okay, we're did it to the thank you page. Now let's go back to our email client, and it's refers to see if it's working good. The emotion of beer. There we go. Let's click on it. And here we have our You see, this email right here has our custom trunk that we just created, and it is very nicely formatted. See, the strong talk is making the strong, you know, both. And then the paragraph is it's much tighter than received. This this here, over here and you can create is fancy custom templates for your emails or any form. Submission really doesn't have to be an email as you want. You can add 18 type of HTML. So as long as the HTML you add is supported by the email client, then you're good to go. So another option I very often used in form it is I want. Whenever users submit, I want them. I want the submission Toby saved inside my my manager. To do that, we have to add a different cool hook, and this one is called Form It Save for So what that's going to do is every time the user submits, you confined the user submissions. If you go to extras for Mitt and then view all submitted farms, the only time you shouldn't do that is if you were. If your users are submitting very sensitive information like Social Security numbers or I D numbers, you shouldn't say them on your server because if somebody hacks are side, a lot of information is going to be exposed and you'll be liable to like a lot of bad stuff . But if it's just like emails with no sensitive information, then that's fine. And there's a lot of things you can do it for. Mitt. If you go toe, it's documentation. You can see, you know, different usage. Here we have the hooks that we talked about. You know the reason why direct to you can also have a lot of different hooks, you know, validation. You can also go service. I validation with it. You know you can also have. You can use them for so many stuff and then you can find all the other older Oh, deem the information. They see all the different parameters you can also use. So just go to the documentation check it out. But this is pretty much the way I tie. I called my contact forms using Model X. 19. Finishing the footer: So let's finish up the food ourselves at our side can actually look presentable. We want the food or to appear in the bottom of every page. And right now it just says I'm for that's fixed that Let's go back to our content editor and then I'll going on that. I'm going to press control, pristine. I'm going to type footer and this will open the foot chunk. And remember, we added the footer as in a chunk, so it's repeated at the bottom of every tempered. So let's go back to a food. I'm going to paste my my footer, but you can at any age their mouth that you like. Then I'm going to save and Dalits. Let's test it out. Oops, Wrong page. Let me go back to our page and then click breast contractors at five. And there we go. That's Ah, that's our foot there. And if we go to the other pages now, if you know, too, about our services and testimonials, Okay, I saw the about page this isn't before, isn't showing and let's try to run pay ticket. Let's try to troubleshoot that. Let's go to the about page and, uh their ago we're using now we're using the correct template. I think the problem is that yes, this pages cash ball. So whenever you're developing your mod Exide, this little thing will give a lot of trouble because pages are catchable by default. So you want to disable this for each page. And now that we disabled the catchable setting and move cash woods, go to your page settings catchable. And then let's clear the cache once again, just for good measure. And then it's your side against breast contractors at five. And there we go. That's our food is repeated in every page, and we are doing so using the chunk that we put it in. 20. Content and resource types: so far. We saw how we can add normal pages toe our model X a tree. But did you know that you can also add different content types to you more? EXP AGES Let's look at an example. Let's I want you to go to your A dashboard and then on the Left Waiters website these air the the This is a list of your sites. Excitement is a list of your pages, so we have home page about our services testimonials, and you see how this page is grayed out. This means that it is hidden from the mayor's, but it is published, and then we have schedule an appointment. Let's go to our services page. If you go to any page and click settings here, you have a content type, so you can. You can add any any type of different content that you want on your page. So let's say, for example, are kind decided instead of Elektronik text on the Services page toe. He wants his users to download a pdf instead. So what you gonna do then is change the content type from HTML PdF click safe, and then what's that's going to do is the service, their source aliases ultimately gonna change from services to services. That pdf card. Oh, it's not going to show up here. The pdf is going to get a pendant. So the next thing we want to do is we actually want to upload the pdf document, okay? And to do that, you want to go into the root of your side and you want to upload the pdf, um, a pdf. It's called for baby services dot pdf. However, the alias is called Services. So what we gotta do is we have too much. The file name to the alias in this case is going to be services that f. And now that we have changed it, let's go back to our side. And then it's clear the the cash and then let's a preview site. And if you click on our services, we were redirected to the pdf. Now it depends on how the browsers are. Said some brothers will download the PdF, others will display. I'm on Google Canary and Gore carried spice. So if we go, let's go back now. And that's how you upload the pdf and you change the content type of Ah, resource to a PdF Another thing. Another thing. I want the doctor about Israel resource type and what that is is instead of having instead of having a page be like a normal document with HTML snippets, you can have it in a different time. So if we have static resource, that could mean any kind of static resource. For example, if you have ah dot html stands alone page, you can applauded and said it, you know, as a static resource, but it can also represent any fire on your system. So even if you have like an image or if you have a pdf, even you can also. You can also upload that, you know, use ecstatic resource, then the We also have sibling. I never use this. It's kind of weird how it works so you can read documentation about it but never used the developing Rolex for like for years, I think. And so and then we have weapon ink and a Web link. What that is is just a link that doesn't link that it can either link to a page within your sight or it can link to an external page, and this is what I usually use if I want to link it to an external page or link it to a page in the site. So let's let's have a better example. It's pressed new document and let's have this menu item called care Thread Care Credit is on a loan agency that provides in in our case, it provides loans for people who cannot afford toe he other pets at the veterinary. Okay, so we have care credit here, but inside settings we want to do is we want to willing this care credit to the character, that website. Okay, so since we're linking externally, we don't have the care credit Web site on our page. So we want to do is write care credit published safe. They want to go to settings, and then we want to change the restaurants, type from document the weapons. Then we want to click safe. And then if we see here, the the options have changed. Okay, we no longer have content. We no longer have some other options because this is just a Web link. And then if we click here, I'm just going to copy and paste the care credit Euro, which is this one, and then we're going to save. So let's literally yourself. Let's pray your site. There we go. Now we have the care credit added to our menu. But if we click on it, then we get redirected to another website, and then if we go back, we go back toe phobic. So that's how same links work. But let's say, for example, you want to change. You want to pro be able to provide your patients with your own loans. So if which has changed this store, you know, loans for killing loan if you just changed to loans and then we changed the resource type two static resource and then we go to static resource and then this is your of the resource of one a link toe. So, um, let's say that we want to link to our Then let's say we have loans. A pdf on our server. So we got link it here, and then we want to do is change the resource elders from carry credit to loans of pdf. Okay, and then we want the the template to be empty. Okay, The last step we want to do is change the content type from HTML, which its default to pdf and then when whenever users quicken, loans there would be redirected to the pdf, and this is the same as if you were using these acts. The same is if you're using the reserves type document and content type. HTM Oh, it's just achieving it in a different way. So and then you have a different icon here. I personally prefer to use document and in content, I Pdf, instead of going into a static resource and then, you know, just changing all these options. So it's up to you toe. This is the the way the different content types, you know, you can create the pages with different content types. 21. MODX Snippets: What if you want to insert some custom peach be called into your sights. To do that, we have to use snippets. Now I want you to goto elements, and then I want you to go to Snippets. Snippets are single peach. Before I was a kid like that that usually used to execute one function, but you can have them execute multiple if you need to. Breaking is usually generated from snippets, for example, have the firm it plug in, which has multiple snippets that do multiple thinks. And then, of course, we also have the white find. And if we click on the way finder, it is actually a very long snippet that is used to generate our medicines. So let's create their custom snippet. Do that. Let's scroll down where to snippets. And then let's click on the plus I come, which will create a new snippet and let's create a very simple one that's going hello work and that that Then let's click on description and right outputs. Hello, Where, and this is our snippet coat. This is where you would ride your normal pH because if you if you will now the difference between normal PTP and snippet code is that you're not allowed toe echo anything. So if you want to output any type of data, you have to use the return function. So since we want to up with how the world we're gonna do is that return quotation marks Hello, world. And it ended with semi colons. So now that we have saved our snippet, it is available throughout our entire more excite. So if we want to output it, let's say on the home page well, we got to do is go to the homepage template and then output there. So our home page templates called home page templates. So let's try to find it. Okay, I am right now. I mean the home page template. So let's try to output How the word about here image Let's go back to our snippet and the sea. It's datum. So our snippet is located in the snippet section. Let's click on it. And so the name of our snippets Havel, underscore World. So what we're gonna do is copy the name, go back into our template double square brackets, and then we want to just write the name of our snippet. Click Hello. Click safe. Excuse me. Now let's go. And we want to do then is we want to clear the cache. Good. Now let's refresh. And there we go. We have output. It had a world on our How much Now this could be an overkill because you could just type hello world in your page. So whoever this is used to an example of how snippets work snippets can also except parameters. So let's say we want to say hello world and then custom name. So what we gotta do? There is Di Palo World, I'm Then we're into type name and then I'm going toe type dollar sign name Diverse I name Dollar sign is a thing that PHP uses tour show a variable name. So what's going going to do is it's going to say hello world, and it's going to upload the specific name and to add ah parameter we're gonna do is fried the name of our snippet Question mark. And then I'm going to write a 9% and then we need to write the exact same. The name. The parameter name needs to be the same as the variable name. So the in this case is his name. Equal sign back takes this very important. This Renault quotation marks these air back ticks and then I'm going to say name equals Stephanie. I'm going to save. Then let's refresh Very good. Says hello, world Stephanie. And this is very important to match the name. Exactly. All right, So if for example, this is called name too and I have left, this is Nick. Just name. Then it's not going to work so fresh and, uh, the name the spears and you can also have multiple parameters as well. So if we have last name Pickles Newman, if we just add the parameter is not going to show up. But this is why we're going to write the word and I'm going to have another dot and then space. And then I'm going to ride last name. And remember we used last name is our parameter. Now let's refresh and see how that works. Five. Hello. Work Stephanie Neumann and you can change it. Do any other thing. For example, we can say grip Jensen, and it is going to change. And you can also use other the vital of other snippets you can use template variables. It's really cool. So let's say, for example, we want to use the alias. So if you want to say the areas of the page, so let's say, for example, we want to use Let's go back to our home page. It's quick home when I say we want to output the areas of this page. So what we're going to do is use Alias. So instead of Greg, I'm going to add a double double brackets Star Ellis. So what's gonna happen now is this thing's going to output. Hello, World Index de rigour, and you can use any template variable that you want. For example, we have AH, long title. Longtime was called Congratulations. Let's say the name. We want to be long total, so we're going to use the exact same square brackets and inside. It's a long title refresh, and this is the long title that we fetched from our our page, and we used template variable output in the inside our snippet. This is very cool, which allows you to use your stupid to modify many content of data. Another thing I want to mention is deeply. Neither called. The snippets cashed or uncashed if you we just use the name of the snippet day is going to be cashed if you use exclamation mark in from the snippet dance gonna coat and cash. And this is very good. If you are, for example, if your snippet is working on manipulating Jason data, that is dynamic every time because it it should be uncashed. But if it is working on the on manipulating, for example, template variables, then it should be cached. Cash snippets are way quicker than uncashed, obviously. 22. Global variables with ClientConfig: That's as we want to display the my address in the phone number in the Footer, and we also want to display it in the schedule an appointment page as it is normal for a lot of websites now. What we can do is we can either put the phone number and email into a chunk and then reference it are. We can create something called Global variables with with a special extra court kind conflict. And if we do it with the client config, it's coming which tidy and much easier. And we want dilute our installations with numerous chunks that we have to hunt down. Of course, we can also copy and paste it via text. But what if the company changes phone number? What if they move? What did they change their email address? What if the instead of in forget that hospital that come. They want to have customer service the best hospital dot com So let's try to do that via that extra. The first thing you want to do is go to extras. I couldn't installer download extras and then I want you to type client config, press enter and then install it now I have already installed it. So you there's no need for you to do it now, toe configure it. I want you to go to extras configuration. And then I want you to clean this right button over here called admin. What this will do is you're going to add in for a settings to your client configuration. So I'm going to go at settings. Okay, so you cannot die the settings without the group. So the first group is going to be website settings. That's what I'm going to call my group. And then I'm going to click Save and I'm going to add a setting. And he did have a lot off a lot of first African feeling. So since we want to display the my lodgers in multiple places in our side we can do is we can create a new key. And let's name it, for example, website email or just email. So let's just name it email and the fuel type. You can choose any feel tablet you want, however, actually, it has an email field type, which is actually good. Maybe try this one and let's and the label is just going to be emailed description is female of the admin slash owner and then the group is going to be website settings and then you can have a setting is required. I don't think it is. Also, let's do it like this. And then if you go into your convict, this is your first thing you see. So let's go to client view. And since we only have one group, there is only, you know, one group to the check. So here we have the email. So let's demon being in for it for the baby. Don't come. Okay? And now that we have this email, the next thing you want to do you somehow I didn't our template. So remember how we we want Didn't want email to be on our food. Er so let's go. Let's go to our V s code. I'm going to press control. Plus being I'm going to find the food er and we put the food er in the truck. OK, so let's say that we want our email toe appear here next to the copyright. Now our email is in for Ed for baby that come. Okay, so if I Since I want to invoke this value from the configuration if I hover over CDs, double brackets and double plus is, this is what I need in order to invoke the value. So I'm going to go double brackets, double pluses, and I'm going to say email now that now that we have saved, let's clear the cache and check it out, I'm going to press it by five and then we go here. We have the here we have our email. And if I if I go ahead and change it, for example, in for three and then and then fresh, it's going to change in every instance. As long as we use this template tag, it's gonna change everywhere on our side. And that's what makes that's what makes that this extra so powerful because it doesn't matter which page you're on, it will. It will still appear the value, whereas if I had added it is a template variable, you know, it would only appear on one template, So see, see how I have a contact template and home page template. So if I had said okay, only the base for baby template uses uses. This uses this template variable doing something up here in the contact. Speaking of, let's go to our contact. I'm going to say contact and played and, uh, over here it says cause we're in my waas, I'm going to create a new order it list gin. I'm going, Teoh, you guessed I'm going to do double brackets. Bless, plus email. And And that would mean if I go ahead and clear the cache, then I'm going to go, you know, produce site. Actually, if I do like this, okay, we should be able to see it soon, and they're ago. We have the same email appearing on the contact page on the Fuhrer, and just in any place, we can put this in a chunk. We can put it in a snippet. We can put it in a template. Any time you want this repeated, we can put it there. So the next thing was, let's let up a phone number as well. Okay, So to do that, Like I said, let's do it over again. It's going. You go to your dashboard extras configuration, and then now we only have an email field. So we want to create phone field. So to do that, go to admin that setting. And let's name this field phone and labour was going to be phone of the hospital. So this is going to reach the receptionist and then the few type, you know, I usually put it this text. I don't put it down this number because the different people like toe for mother fun. Different wise, you know, some used ashes on studs, you know, they should do whatever they want. And Okay, so we have the key. We have labour, we have text feud, saving close. Okay. And now you know the drill to actually advisory must go to client view. And inside here, I'm going to add phone number of the hospital contract process to save. Then I'm going toe added inside my contact page. So I'm going to do control policy and then contraptions VM and what I'm going to change. He's just going to change the name of this template inside the female. It's got a phone. Now let's control present five. And here we go, the phone. And if we wanted to format it, you know, so that when people click on it, it will it will prompt you to call them I can do a trough tell this is the the phone number and then closing tack open. And then I'm going just again, say, double brackets plus plus and them going to say phone Okay, and it's five. And then when I click on it, I get a prompt toe call. And if I am looking at the site from my fund, them from my phone, If I just tap on this dumb my phone, would I direct me to the DIA pat, and you can use the consideration for anything you want. You don't have to be taxed Inlet and, uh, or email. It could be images. It could be anything you want and let me create. Let's create another group to show you. How is it is if we go back to admit, let's say we want a pricing group. So if you go back to add minimal click at settings actually for creating a new group, let's go to groups and then click Add Group and this group was name is going to be, you know, pricey. So if we click safe, then go to settings and then create setting, so I'm going to say surgery price label prize for surgery and then I'm going to create safe in close, then go back to client view. And here I have two groups. So if I When I when I go to Configuration, I have two groups that have pricing and I have websites X now website settings. You might need to access one group more often than another group. And by default, the group you created last is the 1st 1 whenever we go to the configuration menu. So to make this this group the 1st 1 that opens, what I'm going to do is I'm going to go back to admin. I'm gonna go back to groups and then I'm going to go to sort order. So what I want to do is I want pricing to be a 2nd 1 So what I'm going to do is I'm going to add sort order to, and I'm going to go the website settings and create sort order one. And remember, the the group with the least number off sort order is the one who goes first. So if I got a client view, then I have upsetting, says the first bar. It's the first top and then have. Pricing is the 2nd 1 So that's a price for surgery is going to be $50. And if I want to add another one on Goto admin and then I'm gonna go to settings and I'm gonna go at settings and then I'm going to write, for example, prize grooming. And I'm going to say price for grooming. And here it is important what? Your group. So I want the price to go into the pricing group either wanted to go to a website an expert that saying Make a mistaking mistake instead of the pricing group. We want to do that. We went to the website Settings Group. Then we click and close and then we will go to client view. Oh no, The group is in the wrong. This field is in the wrong group. So they do. There is go back to admin, right? Click them and update setting and then just changed the group from website settings. Toe pricing took line view and there we go. The field is removed from them the wrong group. So I use climb convict If I want specific data to appear on many places of the site with many different templates. Whoever If you want a specific type of data to appear in only one page, then this best to use template variables. Think of climb. Convict is global variable. So the thing for your date, I'm gonna surely one last thing. I use climb convict, especially for for for email and contact information not only because the clients can change very easily themselves, but because it is very easy to misspell and then various to whisper one word in the email. One. Let him one number in the phone number, and then it is invalid for the usual so much customers. I mean revenue when you misspell one thing, I use this. For example, if we go back to our home page template, remember when we have our form, it snippet called toe send image into sent messages to our email. Whenever somebody submits deal contact form in the home page? Well, here we hard called our email, but that's not what I usually do. What I usually do is I go ahead and I create a new client config field for email, and then I take this email and inside the email toe field, I do double brackets and they use plus plus e mail. This way I am. I make sure that this email is correctly spelled in in case I make a mistake. Or do you have to do is change it once and it gets updated all throughout the side, and this is so easy. Now, whenever somebody sends an email with a contact from, it's going to go from the email in this field. 23. Grouping content with Collections Extra: So at this point, our website is progressing and our kind has asked us to add testimonials Page and you know the drill. You open the page on your on the left side of your manager and that inside the contend, you add your content and this is going to be page specific. So there's going to be like, 10 testimonials that the client has taken from there Google, my business profile and the one and from Facebook and the one that uploaded to their side. That's pretty typical stuff. So what would you do there is to go to the content and then you start typing. Somebody just came out. So maybe you type if class and you do this tomorrow, Neos Good. Then you close this def. And then inside the day, if you are another def called testimonial, this will hold individual testimony, use right and close it and they hear you add paragraph, which is going to be a testimonial. And the testimonial is copied from the hospitals Facebook page. And then you also have another Dave inside the different testimonials growth author, and then you and then you write the name over, then you press control process and then you go to go to your side testimonials and there you go. Then you see that you forgot to out the container. So then you go back to your side, and now it's nicely aligned. And then when? When you have tow, add some other testimony is what you do is you copy this. He paced it and then you change the next inside our HTML. So, like this and they're fresh. And there you go. And you might be thinking, Okay, well, that's easy enough. However, Then your client says, I want you to teach my intern to update this so you have to actually go ahead and teaching in a person with no technical skills, how to edit HTML and the the result is gonna be a disaster. Let's say, for example, that the client wants toe delayed testimonials or he wants to add them, for example, sort of just including one sentence of this tomorrow. He wants to includes many paragraphs with estimates that set of client just read a business book and wants to change things up, then to the lead. You have to tell them to go ahead and be very careful easily just classes this testimony in though the whole thing and then the client. If he has no if he has no. In my experience, this is going to be a disaster came. And not to mention that every time you want to add some information, have to copy and paste the HTML. And let's say you want to change here. HTM Oh, that's a Instead of testimony, you know, you want to add something like for testimony. So if you want to like name, spaces and stuff now this is where collections come into play. There's a much easier way to cook. Tour Teoh display and sort and manipulate related content and testimonials is exactly what related content is Another example. Related content is a block and block past. So what I want you to do is I want you to go ahead and install to extras. We're gonna go to him installer. We're gonna go to download extras and we're going down, not collections. So I want you to go install it. Let's click download back to package management in Stowe. Continue. All right, now it's now we have the collections extra and next extra. I want you to install is cold. Get resources, gift resources. Now I want you to download it. All right? Not as we have these two. The store extras installed. It's time to turn our testimonials instead of normal html document. We're gonna turn it into a collection And to do that, we're gonna go to settings and then we're going to go to document type and we have another one popped up here called Collection. We're going to click on it and then we're going to say safe and see how the icon next to our page change from this weird paper to thes three lines. This means that this page is a special page. It's a collection instead of just document so And now that we have our testimonials, see, the difference is very big. So if we go, for example, on the about page immigrated with theme, these fields above it in the content but difficult testimonials page were greeted toe another medical, create child quick create chart book actions and then content. So we want to do is we want to create create child, you know, it's they're minorities waited but just buried me and then we want to create a new testimony. Um, so let's say that the name of our testimonial is going to be the same as the name of our clients. So the name of the client was any Richards and then the content of the testimony, which is going to be a testimony itself. So I'm going to copy and Paste, and then I'm going to a quick published and then I'm going to hide from menus. I not sure if we have to hide it from the menu. That's let's try this and see. All right, we have to hide it from the menu. Let's, um, actually, we don't really have to hide it from a manual me. Sure, let's go back to our main youm because if we hide it from the menu, we might have problems getting it back. So what I want you to do is I want you to go to your header, and I want to go to a way finder car, and I want you to write level one, all right. And I think that should be able to fix it. All right, So what level one does is you're saying only display navigation items that is the first level. So, for example, since testimonials now is no longer just the testimonials page, it's a conviction. It has multiple levels as shown over here. Since you know testimonials. Then you have a 1,000,000 Richards, which is like sub page or child of this Somalia's. But since we added this parameter hits his level one that we're not gonna be displaying any additional levels, so that will hide all the submissions. Unless you want to create a navigation of some mayors, then you have to delete this. Okay, now we have 1,000,000 Richards. And now let's create another child. And then it's coed Renal Robin Gonzalez, and this is going to be our next testimony and then click publish. This is very important. It was something republished and then click safe. And now we've also created a standalone pages for these testimonials. However, this is not where we need it. So we don't need individual pages, but we do need them to be no nicely. We want them to be in the nice cohere in order. So now every time you want to go through testimonies, you just click here and there are and they are here and you have also this menu and you can click unpopular Asian published on Samos lead and publishes just going to temporarily unpublished in them a quick click publish its publishers have duplicated have. Of course, the lead you have view added. It is so easy to work with collections, and you should always try to use collections whenever you have relate Datum cities testimonials. So now that we have this, whoever the problem is that they're not displaying. If we go back to our page to go back to testimonial, see there they're not displaying. Because, let me assure you, if we create another child and then name it Jane Eyre Best Hospital, don't forget to click, publish safe and then go back and clicking. Five. We only have these two testimonials, and the reason for that is we have not called. We have not yet cold. The the testimonies collections. Uh, I don't know why this is giving me an error. I think it's because I accidentally duplicated it. Let me see Jane Eyre safe. There you go. Yeah, there's no problem. Think so. Let me let me click published. So the aliases giving sort of a trouble Alright, Awesome. So we want to display these testimonials inside our page one on top of the other. So to do that, what I want you to do first is we need to create something called the template of art collections. So I wanted to go to elements and I want you to go to chunks and wanted to create a new chunk in this junk is going to be named bestie. Mom, you TPL TPL stands for template. And it is a naming convention in Mod X to name your chunks that uses templates with T p o name. And then inside this code where we're going to do is we're going to copy and paste the cold we use before. So what I'm going to do is open this in the new page. Okay? See this HTML code over here? We want to call the in. We want to copy the individual testimony or anyone. I'm going to press control, plus X. Then I'm going to go back to my new chunk and I'm going to copy control Purpose V. And actually, let's let's test this because I want to show you what What's gonna happen if you don't have any testimonials. Then I want you to go back to your testimony use, and I want you to delete Oh, all the testimonials. But I want you to leave the rapper, okay? Because the rapper is going to be, you know, it's gonna help us to style our content. So if we go back, if we go right now, if we go to our testimonies pages, there is nothing here, Okay? Because the content is empty, the constant containers and them to def. So we want to change that. And to do that, where I'm going to do is we're going to extract this day there inside our content of testimonials. So I'm going to do double brackets were going to say, get resources and then I'm going to say we get Resource is question mark. And here I'm going toe have my parameters. So my parameters for the first problem is going to be parent idea. Actually, this is called parents, and this is very important because we want to list the idea of parents were gonna be extracted the data from So the idea of this page is six. So I can just add six or even better. What I can do is at double brackets star, and then I can i d. This will automatically fetch our current resource i D, which is six and then after parents. What I'm going to do is then afterwards on without t p o. Oh, don't forget every parameter we start with a 9% and this is going to be the name of the trunk that we're using as our template. And remember, the name of our chunk is that we're using as a template is called testimonial Underscore, Tapia. So I'm going to write testimonial underscore TPL one that I'm going to end with a double brackets. Okay, so we're using this snippet called Get Re Sources, which is an extra Winstone to get the information inside the testimonies collection. So retro of your page. If everything looks good, we should be able to see this dagger. Now, you might be thinking, Stephanie, why are we getting Why are we getting duplicates of want testimonials? Well, the reason for this is remember the trunk. We're using testimony T p o. So every since we have three Children in our testimonials collection, we're going to generate any cold. We put into our testimonials TPL three times. And since we have three Children were generating these three times. But you might be thinking, OK, but I want the body of the testimony and the testimony author to be included not just want this to more you three times. So to do to mitigate that when we got to do is we have to use something called placeholders . And what placeholders are there specific template tax that you use whenever you expecting some value. So if we go back to our testimonials and then we open our collection item If I hover over, I see page title, you see Start page title. Our start page title is going to be the name of our author. And if I go here in the content, I'm going to see star content. So we need we need placeholders, court page title and contents. If you go back to elements and we open our testimonials template over here, I'm going to delete this and instead of going toe double brackets and I'm going to say plus page died or okay, and then instead of merely Richards, I'm going to remove that double brackets and I'm going to say Plus content now, let's let's right now let's go back to our testimonials and then see how the page looks at least quick view. And there you go. We have Jane Eyre, 1,000,000 Richards and Robin Gonzales. We have three of names. Bird. We're not getting any of the content or K, we're not getting any of the reviews, and you might be wondering what way? Well, get research is kind of weird. So since the field for our testimonies is actually the content, we have to include 1/3 parameter code include content. I think that was the correct one. Okay, Yeah, that's the correct one. And we're going to We're gonna say equal sign tactics won by default. Zero, which is Rose will change to what? And then if we go back in, we click Refresh. Then we have all the testimonies. And this is, uh this is how you do it. This is how you used corrections. Let's say we want to delete Jane Eyre testimonial. What we do is that we just go here, and then we would quick either and publish that is removed or if you want to like totally leader. Just click. Delete. Yes. And it's the leader than any quick safe. And then you can do all kinds of operations using get researchers and you can know so you can sort them. You can do all kinds of things. This is the get resources documentation. And here you can, you know, do many things with the with the resource is he have your template properties. You have selection properties you can use to get researchers for filters, for sorting. You can use it for a lot of things. So this is one of the most used extras that I use. So another one I want to show you is What if there is no data? What if they're not testimony? Use and you still want to display? You wanted this black Texas says no. This Timoney is found. What you gotta do is inside of get. Resource is I want you to do a column, and then I want you to write default Eco's tactics. No testimonials, no testimony use yet Think, think click constructors V and now you see the testimonials. But if I go ahead and publish them and I went to view it says no testimonials yet and you can use you know, you can add any type of text that you want. And this thing over here is called output modifiers, and they're very useful with Ma Dukes. 24. MODX checklist launch: or do a couple of stuff in models before relaunch it. Then we're going to show you the mod X checklist. If you want the full website prelaunch checklist there, multiple resources you can check. So the first thing we want to do is we want to make sure that I would pages have the correct the med attacks generated in each page. So, for example, if you he says here is our head and this is our chunk, head chunk And right now it is pretty boilerplate. For example, every page instead of saying about us or, you know, testimonials. It just says document. So we want to change that. What I want to do is at the name of the page and then add the site name next to it. So to do that, I'm going to use template variables and remember from our previous remember from our previous tutorials, that template variables are specific custom type content that you can use in each page. So, for example, on the about page we have title, which is a template variable, and we also have a long title. We also have a description. So what I want to do is use the title in the title attack for each page. So what I'm going to do is I'm going to double brackets. That was quite brackets. Then I'm going to do a star, and I'm going to use the title. So the titles name is Paige title. I'm going to go ahead and do Dad. And then what I'm going to do is at Colin or I don't know what that vertical thing is. Good. And then I want to add the name of my site. Now you can. The name of our side is for baby that hospital. You've been talking the hard coded, but when you're working with CMS, it is best toe have. It is dynamic. It's possible because you never know when you're going to copy and paste this cold. Use for another project. Or what if the what if you decide to change the name of the side like what if the company goes to rebrand that you have to menu to change every single instance. So I'm going to do is do a double brackets plus plus, and I'm going to use apps. Side name. All right, now, let's, um let's let's check it out and see if it's work. I'm gonna go to the about pitch and I'm gonna go to view source. And there we go. We have about for baby Vet Hospital Perfect. And before that it was just document. And if you wonder what are got the place beside name, I got it from site settings. If we go on the gear, I come and he clicks it System settings. Here is a bunch of settings that you can use and some of them you can use in your template , something we can. And if you go further very and right side underscore name, then this is Oh, this is there is a lot of information here that you can find an inside name. I change it from Mondex Revolution to for a baby. That hospital. All right, now we've taken a taking care of the title. The next thing we want to do is a meta description. And even though meta description isn't mandatory and it isn't evaluated for issue at oh, it is good practice to other custom. One arise. Google generates a custom. Oh, may a meta description when whenever you know you, you find a site on the Google search engine lists results, and they just take from different paragraphs. And the results really, really funny and sometimes cost your business because you know who can put crazy steps. Always make sure you have made a description. So ready. I don't have any meta description. So I'm going to go ahead and I someone right? Meta name description. And I'm going to do content. Okay, in the content we want to do is we want toe ad this right here. Description. Okay, so let's go ahead and description for the about pages. We love animals and show it. So in the description, we're going to do a double. That was quite brackets. And we're just going to add, I think it was called description. There you go. Now that's safe. And it's tested out. Let's go to view source and let's find it. Look, OK, here is my description. We love animals and me short. Awesome. Now what happens if our client forgets to add a description? Since this field isn't mandatory, the client can just omit it. And if we go back here and test, we're going to see that the content that the description can will be empty and then go is either going to notice blood meta description, order going to the custom thing that we don't want to do because it is really bad. So we can do then is at a default for this tempted variable. So what we're gonna do is we were gonna go inside the square brackets and then we're going to type of Cullen and then we're going type default, and then we're going to equal science back ticks, and then we can say something like, for baby is a fool service. Oops, that hospital. All right. And then if we go back to our side, we'll see that if you go back here fresh there ago, it says for the baby's a full service vet hospital, even though there is no, there is no content inside description. And this is good because sometimes people forget or they created the page in a hurry. Um, you know, things happen that allows them to forget the few in this field. And also when Web development is always a good practice to add as many default values, it's possible because you never know what's gonna happen. So that's That's how you do it with theme with the meta description and the title, make sure you feel Windows. This is a seo and accessibility. It's It's also good side structure, you know, and don't don't have it hard call that would have generated on the fly. The next thing I want you to do is go to your dashboard home page, and, um, usually mod ICS will have warnings over here. So if you still have the set up folder that they were a k your installation for during your route, you're going have a warning here. So make sure you remove that before you launch your side, or if you don't have the HD access enabled for your core folder. If you're on a patch, of course, through an engine next medina, they need to enable it to prevent direct access to your core for that. Otherwise, you know people can hack you, so make sure you do that before your lunch. Another thing that's important is to go to your pages and make sure you click settings catchable. Only do that right before you launch because you never know what kind of changes you're gonna need on your site, and a lot of the time, like I would I would enable the cash a boom for pages to be cashed. And then I have to do a change and they want appeared, and I won't forget. So if if you ever push a change and it doesn't show on the side, make sure you go toe clear cash on your menu so that you know you can see the change. But it's important to capture pages because this can really help with the side load. The important thing is to go to users and major permissions. This is for security reasons, but make sure that you're only giving the lowest possible permission to a user. So, for example, if someone is, if someone is a Combinator who heard the copywriter, they don't need to have access to them system settings or toe pages that they don't have to content on. They don't have to have access to the files. They must have faxes and file systems. Also, they can't pulled images for articles and stuff. Or, if you are Kyra, graphic designer, they don't necessarily need access to you know, the route after beam, so make sure that. You know, you don't give too much too much access to users, and it's not like you don't trust them, but they just the less access user Sabulis chance you have your websites get hacked. Another thing that's very important before you launch your side is to have your backup scheduled. Usually, when I'm on the Model X cloud, I usually have them for seven days from developing. And then when I'm finished, I just move it to 30 days. Okay, So make sure you have backups because you never know what's gonna happen. So it's better that you just pull from a backup done, you know, just having your whole website destroyed. 25. Thank you and keep in touch: I guess I just want to say thank you so much for finishing my tutorial. And please subscribe to my newsletter. You can either pm, your email or just a visit my site and feeling the new set of subscription. The foreign, please. And for everybody subscribes to my new side there, we'll get a free copy of my book. And if you're based in the U. S, also send it to you via the post office for free. And, um, also make sure that you subscribe because I send coupons and any other news via my newsletter. I'm currently working on the lamp team, and I'm going to give huge discounts to my subscribers, so please make sure you describe