Creating a ModX website part 2: Clean up the theme or template
published on
Now that you have your theme added to ModX and the site looks like it should there are a few things we should do in order to clean up the them for ModX use and split things up for use in other templates or pages.
Start with the HEAD
First of all we will start by moving the HEAD section that is currently in the template out to seperate place called a chunk. A chunk is basically just a small piece of HTML that can be inserted into other places wherever you choose. The advantage is that you only need to make changes in one section and they be be reflected in all of the places you choose to use that chunk.
For the purposes of this post copy everything from <!DOCTYPE html> to </head> (including those lines) then, on the Elements tab, right - click the word Chunks and click Create Chunk.
In the Name field add the word HEADsection and paste the HTML into the Chunk Code (HTML) section. Now click Save.
Under the Name field you should see some text explaining how to add this chunk to a resource, template or other chunk. Copy the part that displays [[$HEADsection]] and return to the BaseTemplate where you will replace the entire HEAD section you copied with the link to this chunk ([[$HEADsection]]).
Modx will find your reference to the chunk when it is putting together the final HTML page and replace it with the contents of your chunk.
More HEAD improvements
Whilst the following isn't really necessary as the theme we are using is a simple one - page example it is quite important to change some other parts of the HEAD chunk.
For example, the current HEAD chunk contains a TITLE tag. Left as it is this would mean that every page of your website would have the same title. Usually, you will want each page to have a seperate title such as Home, About Us, Contact etc.
Making the changes
First, find the <title> tag and replace it with <title>[[*pagetitle]]</title>. So far, we have only really worked with templates and static resources (e.g. CSS and JS).
ModX also uses the idea of pages for each page of your website. Each page is assigned to a template. When putting together a page ModX will add any content you have assigned on your page to the template and display the result. Each page will have it's own title which is what the [[*pagetitle]] tag displays. In this way we can make parts of our website dynamically update whilst still using our HTML, CSS and JS theme.
Likewise, replace the <meta name="description" content="" /> line with <meta name="description" content=[[*description]] />. You will add the page description later.
The <meta name="author" content="" /> line should be replaced with <meta name="author" content=[[!+modx.user.id:userinfo=`fullname`]]/> if you have added your name to the ModX user settings. If not you can always just manually add your name to the line.
Note: To add your name to the ModX user settings click on the icon of a person in the bottom - left - hand corner of the ModX window and select your username (it should be the first option). Now add your name in the Full name field and make sure to click Save.
It can also be a good idea to add <base href="[[!++site_url]]" /> in the HEAD section as this will help ModX make sure that any relative URLs are resolved from the root of your site.
Remember to click on Save.
Whilst there are other things we could add to this section we are going to leave it for now and we will add them if necessary.
Your HEAD section should now look something like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content=[[*description]] />
<meta name="author" content=[[!+modx.user.id:userinfo=`fullname`]]/>
<title>[[*pagetitle]]</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Font Awesome icons (free version)-->
<script src="https://use.fontawesome.com/releases/v6.3.0/js/all.js" crossorigin="anonymous"></script>
<!-- Google fonts-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="assets/css/styles.css" rel="stylesheet" />
</head>
Adding the page title and description
If you have followed along as described above you have told ModX to add a page title, description and author to every page it generates.
Adding the author name was described above but now we will turn our attention to the page title and description.
Adding a page title
To add a page title click on the Resources tab and then on the Home (1) page that is already present. This is your home page and is created automatically for you.
You will see a Title field which contains the title of that page. By default this one is set to Home but you can change it to anything you like.
Adding a page description
The description for your page will go into the Description field. This allows you to add a short description of the contents of the page which is good for SEO purposes and will be displayed in search results.
Once you have clicked Save make sure to view your web page. It shouldn't look any different than it did before although the page title may be displayed in the web browser tab.
To check that the description and author was updated you will need to right - click on your web page, choose View Page Source (or something similar) and have a look in the HEAD section of the code that is displayed.
Conclusion
This post has now come to an end. I will describe the steps necessary to make the rest of your site dynamic, and describe in more detail some of the fields you will use, in future posts.