--- title: "How To Create Your First Snippet - Tassos Code Snippets" description: "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 J" url: "https://www.tassos.gr/docs/code-snippets/getting-started/create-first-snippet" date: "2026-04-29T07:56:44+00:00" language: "en-GB" --- [ Home ](https://www.tassos.gr/index.php?option=com_content&view=category&layout=blog&id=24&Itemid=1088) / [ Tassos Code Snippets ](https://www.tassos.gr/index.php?option=com_content&view=category&id=120) / [ Getting Started ](https://www.tassos.gr/index.php?option=com_content&view=category&id=121) # 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](https://www.tassos.gr/docs/tassos-code-snippets/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 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 ``, ``, or `` wrapper tags — paste only the code fragment you want to inject. - For JavaScript snippets, do not include `