Output WordPress Custom Query Posts Loop in Bootstrap Modals

Here is some code to output a custom loop via Shortcode that will display a posts full content in a Bootstrap Modal without linking back to the single post page. This is done on a WordPress theme that has the Bootstrap framework already loaded.

A new loop is created only showing the post title and featured image as a thumbnail, then a counter is set $i which increments at the end of the while loop by an increment of 1, then comes the Bootstrap Modal markup, which has the trigger button and modal markup. The modal markup shows the posts title, full featured image and full content.

The modal attributes for data-target and id are suffixed with the counter increment variable which will make each modal unique, something that has to be done for muliple modals on the page.

Finally the loop end with a message if no posts are available.

The post featured image and post title are not linked to the single post URL so the user is kept on the initial page, this of course can be changed with the links used.

This is intended as a bare bones code snippet which can be altered for different post types and post content, hope it helps with what you need to do.

1 Comment

  1. Juan Pablo on July 19, 2022 at 7:10 pm

    Hola, muchas gracias.
    Me ayudo mucho poder resolver un problema con mi modal
    Saludos!!!!

Leave all Comment