Dismissible Announcement Bar
Shows a slim message bar at the top of the page (for sales, shipping notes or news) that visitors can close. It stays closed on later visits.
Opens WPIDE on
Code
<div id="wpide-announcement" style="display:none;position:relative;padding:10px 48px 10px 16px;background:#1e1e1e;color:#fff;text-align:center;font-size:14px;">
Free shipping on all orders this week. <a href="/shop/" style="color:#fff;text-decoration:underline;">Shop now</a>
<button type="button" aria-label="Dismiss announcement" style="position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:20px;line-height:1;cursor:pointer;">×</button>
</div>
<script>
(function () {
var key = 'wpide-announcement-1';
var bar = document.getElementById('wpide-announcement');
if (!bar) { return; }
try { if (localStorage.getItem(key)) { return; } } catch (e) {}
bar.style.display = 'block';
bar.querySelector('button').addEventListener('click', function () {
bar.style.display = 'none';
try { localStorage.setItem(key, '1'); } catch (e) {}
});
})();
</script>Notes
Edit the message and link. Change the key (wpide-announcement-1) whenever you publish a new announcement so it shows again to everyone.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.