Embedding multiple posts with a single script call
To display multiple embedded posts, just place several <div class="init-embed" data-id="..."> elements and include the embed.js script once at the end.
<div class="init-embed" data-id="123" data-origin="https://example.com"></div>
<div class="init-embed" data-id="456" data-origin="https://example.com"></div>
<div class="init-embed" data-id="789" data-origin="https://example.com"></div>
<script async src="https://example.com/wp-content/plugins/init-embed-posts/assets/js/init-embed.js?v=1.0"></script>
The script will automatically detect all embed blocks and render the appropriate content. There’s no need to call the script again for each post.
Syncing dark mode dynamically with embeds
The plugin automatically detects dark mode when the page first loads. However, if your site includes a JavaScript-based dark mode toggle (without reloading the page), you can sync the embed theme in real-time by watching changes to the <html> element’s class:
document.addEventListener('DOMContentLoaded', () => {
function syncDarkMode() {
const isDark = document.documentElement.classList.contains('uk-light'); // adjust this class name if needed
document.querySelectorAll('.init-embed').forEach(wrapper => {
wrapper.setAttribute('data-theme', isDark ? 'dark' : 'light');
});
}
syncDarkMode();
const observer = new MutationObserver(syncDarkMode);
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ['class']
});
});
This script is optional and intended for developers who need embeds to reflect dark mode changes instantly without reloading the page.
Writing custom CSS for embedded cards
All embedded cards use the .init-embed class. You can create your own CSS file to style backgrounds, fonts, border radius, image sizes, hover effects, and more.
.init-embed {
border-radius: 8px;
background-color: #f9f9f9;
}
.init-embed[data-theme="dark"] {
background-color: #1e1e1e;
color: white;
}
Note when embedding products
If you’re embedding a product instead of a post, the embed element will use the class init-embed-product instead of init-embed. The plugin will automatically detect the type and render the proper layout.
So if you’re using JavaScript to sync dark mode, or adding custom CSS, make sure to also include rules for .init-embed-product as shown below:
.init-embed-product[data-theme="dark"] {
background-color: #1e1e1e;
color: white;
}
Conclusion
Init Embed Posts is not only lightweight and fast, but also fully customizable from the target site. Whether you’re embedding multiple posts, syncing with a live dark mode toggle, or applying a unique design system, the plugin is flexible enough to support it—without modifying any core files.
Take advantage of this flexibility to keep your site design consistent while delivering embedded content efficiently.
Comments