Solving common Web Design challenges with MODX
Using MODX chunks, template variables and output filters to give site managers control over the website.
MODX is one of the best systems to use when advanced options are needed, below I will show you how to use MODX to add some advance CMS options using snippets, chunks, template variables and output filters.
Websites need flexibility
The need for a CMS...
Whilst MODX is not only a Content Maneagement System (CMS) but a framework, a core feature of MODX is it's use as a CMS. Why do webdesigners use and implement CMS systems? It allows managers to have control over the content of their websites.
Wikipedia describes a Content Management Systems as follows:
A content management system (CMS) is a computer system that allows publishing, editing, and modifying content as well as site maintenance from a central page. It provides a collection of procedures used to manage workflow in a collaborative environment. These procedures can be manual or computer-based.
We want options!
Modern CMS systems go further then simply allowing website managers to change the content of a website, the need for truly flexible and easy to use systems has pushed CMS creators to allow user to change every aspect of a website without the need for knowing code. Some examples of advanced CMS options include:
- Selecting page specific templates
- Customizing page-specific layouts
- Adding or removing buttons, the sidebar and other elements
- Role specific manager options
Lets see how you can create some of these options in MODX with ease.
Creating CMS options
Site manager like easy to use, non-technical options. Website managers do not like to enter HTML tags, select plugins or edit PHP files. In MODX you can create any option you want to make managing your MODX website easy for every user.
Below I will show some examples for these options:
Add a optional Call To Action button
A common situation, you have a webspage with a large "Contact us button". Now the clienst says:
Can I remove or add this button myself?
Sure! Just add:
Anywhere you need the button...
There is a good chance that the site manager will not like this a lot, and would prefer a simple option on each page to show or hide the button. MODX allows you to create such a option in several ways, I will explain 2 here.
Optional CTA button #1: using template variables and output filtersThe CTA button option we will be creating (click the image for a bigger view)
Lets create a nice, easy to use, CTA option in the MODX manager in 5 steps:
Create a category called: CTA button
Create a Template Variable called: tv_cta_buttonCTA button TV in the MODX manager (click the image for a bigger view)
Create a second Template Variable called: tv_cta_button_linkCTA button TV in the MODX manager (click the image for a bigger view)
In your MODX template, at the spot where the optional button will go, place the folloring code:
[[*tv_cta_button:isnot=``:then=` [[*tv_cta_button]] `]]CTA button code in the template (click the image for a bigger view)
Clear the cache, and go to (or create) a resource wich uses you MODX template.
In your resource, you will see a tab called Template VariablesThe CTA option as the MODX manager wil see it (click the image for a bigger view)
That looks easy right?
Done with optional CTA button #1, Your site manager will love this easy option for sure!
Optional CTA button #2: using TinyMCE styling
Lets look a a different strategy to create a easy to use CTA button option in the MODX manager using TinyMCE.
Make sure that you have the TinyMCE package installed. If you have not, got to: System > Package Management > search & install the TinyMCE package.
Go to System > System Settings And filter under Core to TinyMCE.Filter settings to TinyMCE (click the image for a bigger view)
Add under CSS Selectors:
Styled button=btn_styledAdding a CSS selector to TinyMCE (click the image for a bigger view)
Now the site manager can use TinyMCE to create links the 'normal' way and assign a class of Styled link (this option we just created in the previous step) in the MODX manager.Creating a CTA button in TinyMCE (click the image for a bigger view)
Now we have created the CTA button #2, another easy way to create manager options in MODX.