The Code Editor allows you to add custom HTML markup to your DigiFlash site without modifying theme files. HTML snippets insert custom content, tracking codes, third-party widgets, and other markup at specific locations on your site.
Creating an HTML Snippet
Navigate to Code Snippets in your WordPress admin menu and click Add New. This opens the code snippet editor where you’ll create your custom HTML.
Enter a descriptive title for your snippet in the title field at the top. Use clear names that identify the content’s purpose, such as “Google Analytics Tracking” or “Custom Footer Banner” for easy management.
In the Code Type dropdown, select HTML. This tells DigiFlash Pro to treat your code as HTML markup.
Configuring HTML Location
After selecting HTML as the code type, you must choose where the markup inserts on your site. The HTML Location dropdown appears with three options:
Head Section – Inserts your HTML in the site header before the closing </head> tag. Use this location for meta tags, tracking scripts, structured data, and other content that belongs in the document head.
After Body Open – Inserts your HTML immediately after the opening <body> tag. This location works well for analytics codes like Google Tag Manager that need to load early in the body but after the head section.
Footer – Inserts your HTML in the site footer before the closing </body> tag. Use this for footer widgets, tracking pixels, chat widgets, and other content that should load after the main page content.
Select the location based on where your HTML needs to appear and the requirements of any third-party services you’re integrating.
Writing Your HTML Code
Click into the large code editor area and write your HTML markup. The editor provides syntax highlighting to make your code easier to read.
Write standard HTML without worrying about PHP tags or WordPress functions. You can mix HTML with inline CSS and JavaScript if needed.
Here are common HTML customization examples:
Google Analytics Tracking
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>Meta Tags for Social Media
<meta property="og:title" content="Your Site Title">
<meta property="og:description" content="Your site description">
<meta property="og:image" content="https://yoursite.com/image.jpg">
<meta name="twitter:card" content="summary_large_image">Custom Favicon
<link rel="icon" type="image/png" href="https://yoursite.com/favicon.png">
<link rel="apple-touch-icon" href="https://yoursite.com/apple-touch-icon.png">Facebook Pixel
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'YOUR_PIXEL_ID');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=YOUR_PIXEL_ID&ev=PageView&noscript=1"/>
</noscript>Custom Banner or Notice
<div style="background: #f0f0f0; padding: 15px; text-align: center; border-bottom: 1px solid #ddd;">
<p style="margin: 0; font-size: 14px;">
🎉 Special Offer: Get 20% off with code SAVE20
</p>
</div>Schema Markup (Structured Data)
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "Your Company Name",
"url": "https://yoursite.com",
"logo": "https://yoursite.com/logo.png",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+1-555-555-5555",
"contactType": "Customer Service"
}
}
</script>Google Tag Manager
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>Publishing Your HTML Snippet
Once you’ve written your HTML code and selected the insertion location, click Publish to activate the snippet. The HTML inserts immediately at the specified location on your site.
If you want to save the snippet without activating it yet, click Save Draft instead. This stores your HTML without inserting it on the live site.
Testing Your HTML
After publishing, visit your site’s frontend and view the page source (right-click > View Page Source) to verify your HTML appears at the correct location.
Check that any tracking codes or third-party widgets function as expected. Use browser developer tools to inspect the inserted markup and ensure it doesn’t cause layout issues or JavaScript errors.
If something doesn’t work correctly, return to Code Snippets, click Edit on your HTML snippet, and modify the code. Click Update to save changes.
Managing Multiple HTML Snippets
You can create unlimited HTML snippets, each inserting different content at various locations. Organize snippets by purpose such as “Analytics”, “Social Meta Tags”, “Third-Party Widgets”, or “Custom Banners”.
Each snippet can be independently enabled or disabled from the Code Snippets list. This makes it easy to test changes or temporarily remove tracking codes without deleting the markup.
Mixing HTML with CSS and JavaScript
HTML snippets can include inline CSS within <style> tags and JavaScript within <script> tags. This allows you to create complete, self-contained widgets or features in a single snippet.
Keep related code together in one HTML snippet rather than splitting it across multiple CSS, JavaScript, and HTML snippets. This makes management easier and ensures all parts of a feature load together.
Common Use Cases
HTML snippets excel at integrating third-party tracking and analytics, adding conversion tracking pixels, implementing structured data for SEO, inserting custom notices or banners, adding live chat or support widgets, implementing cookie consent solutions, and embedding social media feeds or buttons.
Any markup from external services that provides a code snippet to paste into your site works perfectly as an HTML snippet in the Code Editor.