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. 

Using snippets require an understanding of PHP coding. This example only shows a very simple use of PHP code.

 

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. create-new-snippetIn 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;
    ?>

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

  8. 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>


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

  4. 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:

Page used as demo site View from internet browser with snippet showing last 3 lines of code

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.

 

 

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

Did you find this article helpful?

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Need More Help?

Help Center Search

Current Customers

Email: support@WebHostingHub.com Ticket: Submit a Support Ticket
Call: 877-595-4HUB (4482)
757-416-6627 (Intl.)
Chat: Click To Chat Now

Ask the Community

Get help with your questions from our community of like-minded hosting users and Web Hosting Hub Staff.

Not a Customer?

Get web hosting from a company that is here to help.
}