One of the features that sets Modx apart from competing content management systems is the way it handles PHP and HTML code.  Both types of code can be freely used in the creation of any of the pages for your Modx content.  However, PHP code in particular can be used in reusable pieces of code called SNIPPETS.  Snippets in Modx are defined as saved portions of code that can be repeatedly called for use within the Modx website.  In order to give you a basic understanding of the use of snippets, we will walk you through an example of creating and using a very simple snippet. 

Adding a Snippet in Modx

The following steps walk you through creating a snippet within the Modx Administrator Dashboard.

1. Login to the Modx Administrator Dashboard.
2. In the Resource Tree in the left-hand side of the screen, click on the ELEMENTS tab.
3. In order to create a new snippet, you can either click on the new snippet icon, or right-click in the tree-view on the icon that is labeled SNIPPET.  The screenshot to the right shows what you may see:
4. When you click on the new snippet icon you will open up the form to create/edit a snippet.  Click on the NAME field and name the snippet. For the purpose of this example, we are naming the snippet testsnippet.
5. Click on the DESCRIPTION field and type in a short description.
6. We will be leaving the values on the right-side form (Category, 'Lock snippet for editing', 'Clear Cache on Save', and 'Is Static') to their default settings.  Click on Snippet code (php) and add the following:
   
   

   <?php
   $output="<p>A simple website<br />
   Bits of words and pictures make<br />
   Something with nothing</p>";
   return $output;
   ?>

The above PHP code simply outputs three lines of text to the screen.


7. Click on the SAVE button in the top right-hand corner of the screen.

Using a Snippet in Modx

The next part of this tutorial uses the snippet that you created (called testsnippet) in a simple Modx document. You will see how to reference the snippet with a simple tag (for more information on tags, go to Commonly Used Tags in Modx) and how the output from the snippet appears on the page.

1. Click on the RESOURCE tab in the Resource Tree.
2. Create a new document using "Demo Web Page" as its title.  In the content section of the document, add the following code:
   
   

   <center>
   <h1>A Simple Sample Web Page</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac ullamcorper ante. Integer in urna nibh. Aenean vel risus tellus.</p>
   <p> </p>
   <p>My Haiku of the Day:</p>
   <p>[[testsnippet]]</p>
   </center>


Note: In the code above, the snippet is referenced as per its name with tag "[[testsnippet]]".


3. Click on SAVE in the top right-hand corner to save your entries.

This completes the use of referencing a very simple SNIPPET within a Modx document.  Note how the snippet is referenced within the document web page.  The following screenshots indicate how the snippet appears in the document settings in Modx and then in the view of the page from a web browser:

In the screenshot above, the snippet is outputting 3 lines of text  (a simple haiku).  This is a very simplistic view of how SNIPPETS can work, but as you grow more experienced with Modx and coding the snippets with PHP code, you can see the power of snippets as they are used throughout your Modx website.