Dynamic webpages that have information that needs to change on the fly can be made with Modx snippetsSnippets are basically portions of code that can provide menus, listings, form-functionality and other content that may need to be easily modified.  In order to create a snippet you will need to have some knowledge of coding with PHP.  We are not going to explain all the various ways to code a snippet, but in order to show how this process works, we are going to create a simple example of a snippet using some very basic PHP code.  The following article explains how to create a snippet within the Modx Administrator dashboard.

 

Creating a Simple Modx Snippet

 
Creating the Snippet

  1. Login to the Administrator Dashboard for Modx.
  2. Click on the ELEMENTS tab of the Resource Tree in the left portion of the screen.

  3. When you hover over the icons at the top of the resource tree, you will see a text pop-up.  The NEW SNIPPET icon is third to last icon going from left to right.  You can also right-click on the SNIPPETS icon that is labeled in the tree below.  This will bring up a drop-down menu that allows you to select NEW SNIPPET.

  4. A form will appear for the new snippet.  There are two tabs at the top of the form:  Create/Edit Snippet and Properties. We will be focusing primarily on just the Create/Edit Snippet tab.  Remember that snippets are basically PHP code so they can have many functions for your Modx website.  However, for this tutorial we're simply going to create simple snippet so that you can see the different steps involved in creating a snippet. Click on the NAME field and type in a name for the snippet:  testsnippet.

  5. Click in the DESCRIPTION field and give the snippet a short description.

  6. Leave the values at the right of the new snippet form set  to their default value.  The CATEGORY defaults to '0' because it is not categorized.  The other unchanged options include 'Lock snippet for editing', 'Clear cache on save (checked)', and 'is Static'. 

  7. The meat of the new snippet form is the SNIPPET CODE (PHP).  All the code should begin with '<?php' and then end with '?>'.  For the purpose of this tutorial we will only create a simple output file using the following code:

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

  8. When you have finished copying the code into your snippet, click on SAVE in the top right hand corner of the screen.

 

Using the Snippet


Now that you have finished creating the snippet, how is it used within a Modx website page?  The answer is to use the snippet with a simple tag in a Modx page.  To see another tag being used in a tutorial, see How to Use a Chunk Tag in Modx.

  1. Click on the RESOURCE tab in the resource tree.
  2. Left-click to select the web page you wish to edit in the resource tree. This will bring up the web page on the right.  Scroll down until you see the content of the page in the editor.
  3. Since the editor I am using is using a different editor, we will want to toggle the editor (the TinyMCE editor) off.  This can be done at the bottom of left of the screen with the option labeled "Toggle Editor".  Uncheck "Toggle Editor" so that we can see the code on the page.  Here's a screenshot of what you may see:

    Toggle the editor off

  4. Next, I added the following code:

    <p>My Haiku of the Day:</p>
    <p>[[testsnippet]]</p>

    Note that the snippet I created was named "testsnippet" (names for snippets are case sensitive, so be sure to spell it correctly). The snippet is placed in this format [[snippetname]].

  5. Click on the SAVE button in the top right-hand corner again.


This completes the addition of the snippet to the web page. To see how the added code affects the page, check out the screenshots below:

sample-page-no-snippet Snippet added

The screenshots above show the result of adding the snippet to the page.  You can see the small paragraph added in the screenshot on right. 

 

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 our Help Center:
Email Address
Optional, but our team may contact you for more information.
Did you find this article helpful?

Post a Comment

Name:
Email Address:
Comment:
Are you a bot?
Submit

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

News / Announcements

Update to SSL Certificates - Certificate Warnings
1969-12-31 11:00 am EST
Hits: 658

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!

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.