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.

1. Log in to your Joomla administrator
2. Go to Components → Tassos Code Snippets
3. Click New to open the snippet editor, where you can configure your new snippet
4. 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".
5. 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
6. 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.
7. 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
   • Site Page Load, Admin Page Load and Site and Admin Page Load (PHP snippets only, see the PHP snippet docs)
8. When using the Shortcode insertion method, place {tcs snippet.alias} anywhere Joomla processes content — in articles, modules, or component output.
9. 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.
10. 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.
11. 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.

Viewing Your Changes

Visit your site's frontend to see your snippet in action. If you don't see changes immediately, try:

• Clearing your browser cache (Ctrl+Shift+R or Cmd+Shift+R)
• Clearing your Joomla cache (System → Clear Cache)
• Verifying your snippet is published

That's it! Now you know how to add snippets with Tassos Code Snippets.

Next Steps

Congratulations! You've created your first code snippet. Now you can:

• Explore different snippet types to understand what each can do.
• Learn about snippet locations to target specific areas.
• Set up conditional logic to control when snippets run.
• Check out the Recipes for practical patterns.

If you run into any issues, check our Troubleshooting guide for solutions to common problems.