General Extensions Code Snippet Estimated reading: 9 minutes 21 views Code Snippet extension in Animation Addons allows adding custom code to WordPress directly from the dashboard. Theme files do not need to be edited, reducing the risk of errors and keeping the site stable. Snippets can include CSS for styling, JavaScript for interactions, or PHP for advanced functions. Snippets are managed entirely from the admin interface, where they can be created, tested, enabled, or disabled at any time. This provides a safe and flexible method for working with custom code while maintaining full control over when and how snippets run. Requirement Elementor (Page Builder) Animations Addons for Elementor (Our Plugin) Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start. How To Activate Code Snippet Go to your WordPress Dashboard. Click on Animation Addons. Head to the Extension tab. Under General Extension, toggle on Code Snippet. Once you enable Code Snippet, its function settings can be found under the Animation Addons sub-menu items. Step 1: Create and Configure Your Code Snippet To get started, click on ‘Code Snippet’ and then click ‘Add New Snippet’. Active You can test snippets or temporarily disable them without losing your work. Toggle the Active button to the right to enable it, or to the left to disable it. For example, the Active status is enabled here. Snippet Title Give your snippet a title of your choice. For example, here the title is ‘Footer Slide Up on Scroll’. However, you can set any title based on your choice. Where should this Snippet Appear? This option determines which pages, posts, or areas of your site will execute the snippet. You can run the snippet on the entire website, only the homepage, specific pages or posts, or based on categories, tags, or custom post types. For example, if Front Page is selected, the snippet will run only on the homepage. You can select any other option based on your preference. Specific Pages / Posts This option allows you to run a snippet only on selected pages, posts, or custom post type items. After selecting this option, the Add Specific Pages section appears, where you can pick items individually. For example, you can add the Home and Portfolio pages, or include as many items as needed. Blog / Post Page (Archives) Selecting a Blog or Post Archive runs the snippet on the archive template that lists multiple posts. On all archive pages, including blog, post, and custom post type archives, the Before Content and After Content load locations are disabled. This prevents duplication or layout issues caused by content generated in a loop. Singular Post / Custom Post Type Item Selecting a Singular Post or a single custom post type item runs the snippet only on that specific item. It does not appear on archive pages. On these singular items, the Before Content and After Content load locations are available, allowing you to insert code just before or after the main content. If you want the snippet to appear on an archive as well, create a separate snippet targeting the archive.Note: The Before Content and After Content locations are only available on singular pages, posts, or single custom post type items. They are disabled on all archive pages. However, Head, Footer, and After Body Open work on all page types, including archives. Load Location The Load Location option determines where the snippet is inserted on the page, affecting when and how the code executes. Options: Head Section: Insert code inside the <head> element. Use for CSS or scripts that must execute before page render. Footer: Insert code before the closing </body> tag. Use for JavaScript animations or scripts that run after page content loads. After Body Open: Insert code immediately after the <body> tag. Use for tracking codes or scripts that require early execution. Before Content: Insert code immediately before the main content. Use for banners, alerts, or content-modifying scripts. After Content: Insert code immediately after the main content. Use for widgets, extra sections, or scripts below page content. Important Notes: Archive Pages: On archive pages, including blog, posts, and custom post type archives, the Before Content and After Content load locations are disabled. This prevents duplication or layout issues because archive content is generated in a loop. Singular Content: On singular pages, posts, or single custom post type items, the Before Content and After Content locations are available and can be used as needed. Execution Priority It controls the order in which snippets are loaded when multiple snippets exist. For example, here the priority value is set to 50. Since the execution priority is 50, it will load before priority 70. In short, the lower the priority value you set, the sooner it will load. However, you can set any priority value you prefer. Code Type In Code Type editor, you will find language options like HTML, CSS, JavaScript, and PHP. Here’s what you can now do with this editor: PHP: Runs server-side code to add or change WordPress functionality; you don’t need to add <?php ?> tags manually.CSS: Adds styles like colors, fonts, spacing, or layout; no <style> tags are needed.HTML: Adds custom page elements or structures directly; no <html> or <body> tags required.JavaScript: Adds interactivity or animations that run in the browser, like sliders or hover effects; no <script> tags needed.For example, ‘CSS’ is selected here, but you can choose any language you prefer. Additionally, if you choose a language like PHP and later want to switch to another language, such as JavaScript. Then a warning will appear, as shown in the image, ‘Switching code type will clear the editor’. Also, code written in one language won’t work in another. For example, if you choose JavaScript, PHP code won’t run in the JavaScript editor. Similarly, if you choose a markup language like CSS, HTML code won’t run there. You get the idea. Code Content In code content, you can use four programming languages: HTML, CSS, JavaScript, and PHP. If you are a beginner and don’t understand how to use a programming language, just click on ‘Insert Example’. Right after the click, it will show a code sample based on the programming language you have chosen. Important: If you click “Insert Example” before saving your snippet, any code you typed will be cleared, so always save your code first. Dark Mode This changes the snippet editor’s background and interface from light to dark, based on your choice. Light Mode: White background with dark text.Dark Mode: Dark background with light text. Simply toggle the button to switch. For example, dark mode is enabled here. Note: Dark mode is not saved in the editor. If you reload or exit, it will return to the default light mode with a white background and dark text every time. Number-01 By clicking on full-screen mode, you can expand your editor to fill the screen. To return to the editor dashboard, press ‘ESC’ on your keyboard, or click the ESC button on the right-hand side of your screen to exit full-screen mode. Number-02 By clicking this button, you can easily copy your entire code from the clipboard. Number-03 By clicking this button, you can download your code snippet source file directly. Note: The snippet’s source code can be used in any code editor, including Visual Studio Code, Sublime Text, and others. Finally, click on ‘Save Snippet’. Once you click save snippet, you will find two more options available. Such as Add New Snippet and Delete options. Clicking ‘Add New Snippet’ allows you to create an unlimited number of snippets. Existing snippets can be removed instantly by clicking ‘Delete’. However, if you press the delete button, a warning will appear asking, ‘Are you sure you want to delete this snippet?’ It prevents unintentional deletion of the snippet’s source code and provides an option to cancel the action. Step 2: Handle Multiple Snippets at Once Bulk actions make it easy to manage several snippets together. You can quickly apply changes without handling each snippet one by one. Bulk Action In the bulk action settings, you will see three options: Delete, Activate, and Deactivate. Here’s what each one does: Delete: Removes the selected snippets permanently. Deleted snippets cannot be recovered and must be recreated to use again. Activate: Activates the selected snippets, enabling them on the site.Deactivate: Deactivates the selected snippets without deleting them. They can be reactivated later if needed. After that, you will see several options to manage your code snippet. Let’s take a look: Title: The name of your snippet. It helps you find and manage it later. Code Type: Indicates the language of the snippet. Supported types: PHP, CSS, HTML, JavaScript. No tags needed. Visibility List: Specifies where the snippet will execute, such as all pages, the homepage only, or selected posts. Load Location: Controls snippet placement in the site’s markup (Head, Footer, After Body Open, Before Content, or After Content). For more details, click View more. Priority: Specifies snippet execution order. A lower value executes before higher ones. The Priority column includes a sortable control. Click the up arrow (▲) to sort in ascending order (ASC), or the down arrow (▼) to sort in descending order (DESC). Status: The Status option controls whether your snippet is executed on the live site or just stored inside the plugin.Last Modified: Displays the last modified date and time of the snippet. Final Words Code Snippet extension in Animation Addons makes adding custom code to WordPress simple and safe. You can easily insert CSS, JavaScript, HTML, or PHP without editing theme files or risking site errors. Everything is managed from the dashboard, so you can create, test, and control when each snippet runs. It gives you full flexibility to customize your website the way you want while keeping it stable and organized. In short, the Code Snippet extension helps you build a smarter and more dynamic WordPress site with complete control and confidence.
