There is a Wordpress website with a Visual Composer plugin. On the main page there is a Post Grid block, which displays the last two posts (a simple block with 3 elements: post title, post excerpt and button). On the blog page, respectively, all posts from the category are displayed in a separate 3x3 grid with the same three elements.

Question: how to make so that when clicking on the button modal popup opens with the contents of the post?

In grid builder, when editing a grid pattern, there is no possibility of adding a modal VC block. The content of the record should be displayed in the model window when clicking on the button under each post both on the main page and on the post page, since A separate page for the post and should not be on the idea, only a modal popup with all the contents of the record.

  • one
    In pure VC modal windows do not. You will need the Easy Fancybox plugin, knowledge of html, php, and WordPress functions. If this does not scare, tomorrow I can describe how the implementation. - KAGG Design
  • @KAGGDesign does not scare! I'm waiting! And thanks in advance - Merkelst

1 answer 1

To display the contents of the record in a modal window, you need to install the Easy Fancybox plugin , some knowledge of html, php, and WordPress functions. The procedure is described below.

Install the Easy Fancybox plugin.

Create a button in Visual Composer (VC), style it, save the page and look at the button code in the browser inspector:

enter image description here

Since VC adds a class to the vc_btn3_container block and not the <a> tag, this does not suit us. Copy the <a> tag, delete the button in the VC and create an html block instead. Insert the <a> tag there, copied from the browser, not forgetting to add the fancybox class and the link to the anchor #read_post_popup.

A page in a VC should look something like this:

enter image description here

At the very bottom of the page a number of #popups has been added, which should be hidden in css:

 #popups { display: none; }

This is a blank for popaps (there may be a lot of them). The series contains a text block with the following content for one popup:

enter image description here

If there are several popups, then the code in this block must be cloned several times, changing the text inside. Of course, then there should be several buttons. The button-popup connection occurs via an anchor (in the example #read_post_popup).

The block shown above cannot be html, because it uses a shortcode (which is discussed below), and shortcodes in html blocks are not processed. You can edit this block only in text, not in visual mode.

At this stage, you can already try to save the page and click on the button - a modal window will appear (with content that is not yet correct).

To display the desired content, you need to write your shortcode. It is quite simple. In the function.php your theme you need to insert the following code:

 function read_post_shortcode( $atts ) { $p = get_page_by_title($atts['title'], 'OBJECT', 'post'); if ($p) return do_shortcode($p->post_content); else return ''; } add_shortcode('read_post', 'read_post_shortcode');

That's all. A working example can be viewed on my test site .

  • Thank! But there is another question - how to insert this whole structure into the ready grid pattern in the Grid Buider. After all, there is no possibility to add htmlconstructions - Merkelst
  • one
    This is a separate question. - KAGG Design
  • This is the same question, reread. All posts are displayed through the template in the grid builder. Both on the main and on the page of all posts. - Merkelst
  • @Mikhail sounds like a separate question, which is a logical continuation of this. I recommend that you post a new question and give a link to this to understand the context. - Nick Volynkin ♦