Adding "evidence-based" button under post titles

Hi Gleb,

You can give this solution a try:

1. Go to post editor, add a custom field - evidence, set a value for it.
https://www.screencast.com/t/L5rvpxMPBt

2. Go to block element, add the buttons (Buttons block from Generateblocks plugin), choose Post meta as Dynamic text type, enter evidenceas Meta field name.
https://www.screencast.com/t/pMkDVCBp

3. Give the dynamic button a custom CSS class: evidence-count:
https://www.screencast.com/t/4YhvUEcMQ0h

4. Add this CSS:

.gb-button.evidence-count:before {
    content: "This post has ";
    padding-right: 0.3em;
}
.gb-button.evidence-count:after {
    content: "references";
    padding-left: 0.3em;
}

In this way, you'll be able to manually set references number for each post.

Hope it's helpful :)

Please be noted, in order to use dynamic options of block element, you'll need to install Generateblocks plugin.https://wordpress.org/plugins/generateblocks/

Here's a tutorial video on how to use custom field in Block element - Page hero:
https://youtu.be/H6wHd83DfDI

Thanks Ying, that's a clever way of doing this. Do you know how I can make the "evidence based" button open a popup window on click like in the example?

Hi gleb,

You need to create a custom-styled (position: fixed; display: none;) element inserted after the site's footer for this and add a script using the button as the trigger.

A simple script + CSS combo would be:

<script>
let evidence_btn = document.querySelector('.evidence-button');
let evidence_modal = document.querySelector('.evidence-modal');

evidence_btn.addEventListener('click', function(){
evidence_modal.classList.toggle('show');
});
</script>

and style of:

.show {
display: block;
}

This script assumes you have a button w/ a class of evidence-button and a modal popup container block w/ a class of evidence-modal. This script toggles adding/removing "show" class which hides/shows the modal.

Thanks Elvin I think I understand but how do I add the modal popup itself? Which block do I use?

And do I add the "position: fixed; display: none;" in CSS for the element .evidence-modal?

Hi there,

for the modal, i would opt for a plugin to do trigger open and close actions.
As the example code Elvin provided will only handle the Open, so that would need extending for the close button, and you will want to build in legacy browser and touch device support.... nothing worse then a popup interfering with the UI.

This plugin is the most used:

https://en-gb.wordpress.org/plugins/popup-maker/

Thanks David, I think I got it to work with Popup Maker. Is there something else I need to do for legacy browser and touch device support?

That plugin covers touch devices and has legacy browser support :)

Thank you, you guys rock as usual

You're welcome