Working with HTML Snippets
Image to be inserted in the near future: Screenshot of the HTML content editor in Flexcode
HTML snippets allow you to add custom content, elements, and structures to your WordPress site without editing theme files. This is perfect for adding banners, notices, custom sections, or any HTML content that your theme doesn't natively support.
HTML snippets are injected directly into your page's DOM. This makes them powerful for adding custom content without modifying theme files, but also requires careful implementation to avoid conflicts.
Adding HTML Content
- Navigate to Flexcode
- Select the page where you want the HTML to appear from the page selector at the top (choose "Global" for all pages)
- Enter your HTML code in the dedicated HTML content box
- Click Deploy Changes
Image to be inserted in the near future: Screenshot showing the HTML content box in Flexcode
When adding HTML snippets, consider where they will appear in your page structure. The placement depends on your theme's hooks and may vary between different themes.
Practical HTML Snippet Examples
Example 1: Simple Notification Banner
<div class="notification-banner">
<p>🔔 Our site will be undergoing maintenance this weekend. <a href="/status">Learn more</a></p>
</div>
Page Selection: Global Purpose: Display a site-wide notification that appears on every page
Image to be inserted in the near future: Screenshot of the notification banner on a website
For the notification banner to be properly styled, you'll need to add a corresponding CSS file with styles for the .notification-banner class.
Example 2: Call-to-Action Button
<div class="cta-container">
<a href="/special-offer" class="cta-button">
Get 20% Off Today!
</a>
</div>
Page Selection: Home (or any specific landing page) Purpose: Add a prominent call-to-action button to your page
For maximum conversion, place your CTA button in a prominent location and use contrasting colors to make it stand out from the rest of your content.
Example 3: Social Media Icons
<div class="social-icons">
<a href="https://facebook.com/yourpage" aria-label="Follow us on Facebook">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.989C18.343 21.129 22 16.99 22 12c0-5.523-4.477-10-10-10z"/>
</svg>
</a>
<a href="https://twitter.com/yourhandle" aria-label="Follow us on Twitter">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
</svg>
</a>
<a href="https://instagram.com/yourprofile" aria-label="Follow us on Instagram">
<svg width="24" height="24" viewBox="0 0 24 24">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 1 0 0 12.324 6.162 6.162 0 0 0 0-12.324zM12 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.406-11.845a1.44 1.44 0 1 0 0 2.881 1.44 1.44 0 0 0 0-2.881z"/>
</svg>
</a>
</div>
Page Selection: Global Purpose: Add social media icons to your site
Image to be inserted in the near future: Screenshot of the social media icons
Notice the use of aria-label attributes in the social media links. These improve accessibility by providing context to screen readers about what each link represents.
Example 4: Custom Author Bio Box
<div class="author-bio">
<img src="/wp-content/uploads/author-avatar.jpg" alt="Author Name" class="author-avatar">
<div class="author-info">
<h4>About the Author</h4>
<p>John Smith is a WordPress developer with over 10 years of experience building custom solutions for businesses of all sizes.</p>
<a href="/about" class="author-link">Read More</a>
</div>
</div>
Page Selection: Blog Post (or the template used for blog posts) Purpose: Add an author bio to blog posts
When using image paths like /wp-content/uploads/author-avatar.jpg, make sure the image actually exists at that location. If your site uses a different upload directory structure, adjust the path accordingly.
Combining HTML with CSS and JavaScript
For the best results, pair your HTML content with CSS and JavaScript files to style them and add interactivity.
When creating complex components that combine HTML, CSS, and JavaScript, use consistent naming conventions for your classes and IDs to make the relationship between the files clear.
Example: Complete Popup Announcement
HTML Content:
<div id="popup-announcement" class="popup-container">
<div class="popup-content">
<button id="close-popup" class="popup-close">×</button>
<h3>Special Announcement</h3>
<p>We've just launched our new product line! Check it out today.</p>
<a href="/new-products" class="popup-button">View Products</a>
</div>
</div>
CSS File (Add a file named "popup-styles.css"):
.popup-container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 9999;
justify-content: center;
align-items: center;
}
.popup-content {
background-color: white;
padding: 30px;
border-radius: 5px;
max-width: 500px;
text-align: center;
position: relative;
}
.popup-close {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
}
.popup-button {
display: inline-block;
background-color: #4CAF50;
color: white;
padding: 10px 20px;
text-decoration: none;
border-radius: 4px;
margin-top: 15px;
}
.popup-button:hover {
background-color: #45a049;
}
JavaScript File (Add a file named "popup-script.js"):
// Set loading type to "deferred" for this file
// Show popup after a delay
setTimeout(function() {
const popup = document.getElementById('popup-announcement');
if (popup) {
popup.style.display = 'flex';
}
}, 3000); // 3 seconds delay
// Close popup when clicking the close button
const closeButton = document.getElementById('close-popup');
if (closeButton) {
closeButton.addEventListener('click', function() {
const popup = document.getElementById('popup-announcement');
popup.style.display = 'none';
// Remember that the user closed the popup
localStorage.setItem('popupClosed', 'true');
});
}
// Check if the popup was previously closed
if (localStorage.getItem('popupClosed') === 'true') {
const popup = document.getElementById('popup-announcement');
if (popup) {
popup.style.display = 'none';
}
}
Page Selection: Global or specific landing page Purpose: Display a popup announcement after the page loads
The popup is set to appear after a 3-second delay (3000 milliseconds). You can adjust this timing by changing the value in the setTimeout function.
Popups can be intrusive and negatively impact user experience if overused. Consider using them sparingly and only for important announcements.
Best Practices for HTML Snippets
- Keep it clean: Use proper indentation and formatting for readability
- Use semantic HTML: Choose appropriate tags for better accessibility
- Add comments: Include comments to explain complex sections
- Be mindful of conflicts: Avoid ID or class names that might conflict with your theme
- Test thoroughly: Always test your HTML content on different devices and browsers
Semantic HTML means using the right HTML elements for their intended purpose. For example, use <nav> for navigation, <header> for page headers, and <button> for clickable buttons instead of styling <div> elements to look like buttons.
Troubleshooting HTML Snippets
Common Issues
- HTML not appearing: Check if you've deployed your changes
- Layout breaking: Your HTML might be conflicting with the theme structure
- Mobile display issues: Test on different screen sizes and adjust as needed
Improperly formed HTML (like missing closing tags) can break your entire page layout. Always validate your HTML before deploying it to a live site.
Solutions
- Start with simple HTML and gradually add complexity
- Use browser developer tools to inspect and debug
- Make sure your CSS is properly targeting your HTML elements
Most browsers have built-in developer tools that allow you to inspect HTML elements. Right-click on any element and select "Inspect" or press F12 to open these tools.
Styling Your HTML Content
Always add CSS files to style your HTML content. Here's a simple example:
HTML Content:
<div class="featured-box">
<h3>Featured Product</h3>
<img src="/wp-content/uploads/product.jpg" alt="Featured Product">
<p>This amazing product will solve all your problems!</p>
<a href="/product" class="featured-button">Learn More</a>
</div>
CSS File (Add a file named "featured-box.css"):
.featured-box {
border: 1px solid #ddd;
border-radius: 5px;
padding: 20px;
text-align: center;
max-width: 300px;
margin: 0 auto;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.featured-box h3 {
color: #333;
margin-top: 0;
}
.featured-box img {
max-width: 100%;
height: auto;
margin: 15px 0;
}
.featured-button {
display: inline-block;
background-color: #0066cc;
color: white;
padding: 8px 16px;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s;
}
.featured-button:hover {
background-color: #0052a3;
}
The max-width: 100% and height: auto properties on the image ensure that it remains responsive and doesn't overflow its container on smaller screens.
Using CSS transitions (like transition: background-color 0.3s) creates smoother hover effects and improves the perceived quality of your user interface.