Request Dev Services ยป / Notes /

Add close button to your WordPress post excerpts with jQuery (JS tips)

Add a neat close button to all your WordPress CMS article posts. The button will display at the top right of all your posts. The button is added simply below using jQuery, and the global ‘article‘ tag, but only closes the one relevant article post at a time with use of ‘parents‘. The use of ‘prepend‘ allows the button to be invoked before the index content, as opposed to ‘append‘ which inserts after.

The jQuery:

$(document).ready(function() {

$('article').prepend('<span class="close">(Close it X)</span>'); // add the button at the top of the indexed content, use append for bottom	

$('span.close').on("click", function () {
    $(this).parents('article').fadeOut(1400); // use this to access parent only

<!-- insert script before the closing body tag within footer.php file -->

See it in action with a live JSfiddle demo. Have a code demo request? Let me know!

About the Author
Cameron Cashwell Web Developer
I build websites, web apps, and software. Wanna work together? Let's chat about your project!

Leave a Reply

Be the First to Comment!

Notify of