How To Create Your First Snippet

Follow the steps in this article to learn how to add your first custom code snippet in your Joomla site and what options you have.

Log in to your Joomla administrator
Go to Components → Tassos Code Snippets
Click New to open the snippet editor, where you can configure your new snippet
The first thing you'll want to do is give your snippet a descriptive Title. A clear title makes it easy to find and manage your snippets later, especially when you have many of them. Choose something that clearly describes what the snippet does, for example: "Add Google Analytics", "Custom CSS for Mobile Menu", or "Hide Joomla Generator Tag".
Next, select the right type of code for your snippet from the Code Type dropdown. We support 7 snippet types:
- Text
- HTML
- CSS
- CSS External Files
- JavaScript
- JavaScript External Files
- PHP
Understanding where to place your snippets is crucial for them to work correctly. We offer the following two main Insertion Methods:
- To auto-insert the snippet to a predefined location, select Auto-Insert.
- To insert the snippet manually via a shortcode, select Shortcode.
When using Auto-Insert, the available locations vary by snippet type. In most cases, the following locations will be available:
- Site Header
- Site Body
- Site Footer
- Admin Header
- Admin Body
- Admin Footer
- After Article Title
- Before Article Content
- After Article Content
When using the Shortcode insertion method, place {tcs snippet.alias} anywhere Joomla processes content — in articles, modules, or component output.
Paste your code into the editor, which determines the type of snippet you are editing and will provide syntax highlighting to make your code easier to read and edit.
- For HTML snippets, do not include <html>, <head>, or <body> wrapper tags — paste only the code fragment you want to inject.
- For JavaScript snippets, do not include <script> tags.
- For PHP snippets, do not include the opening <?php or closing ?> tags.
- For CSS snippets, do not include <style> tags.
In the Snippet editor, you will find a tab called Conditional Logic, which allows you to create powerful rules to control when and where your snippet runs. You can target specific pages, users, devices, components, and much more. Leave it empty to run it site-wide. Learn more in Using Snippet Logic.
The last step is to save your snippet and set its status. In the right sidebar, you'll find the Status dropdown. Set it to Published to activate your snippet, Unpublished to temporarily disable it, or Archived to store it for future use.