Using simplemodal with wordpress

Question

I am trying to use simplemodal to have modal popups with text in wordpress posts. I've played around with various plugins but they have specific uses (such as the contact form, or another one I saw that displays a single note you can customize).

I've tried following this tutorial: http://wordpressthemescollection.com/ajax-wordpress-post-popup-with-simplemodal-and-jquery-488.html but the instructions are not very clear for people without advanced jquery or wordpress knowledge and it simply isn't working for me. The author does not explain where you put the function, for instance.

For anyone who's gotten simplemodal working in wordpress, without developing a plugin, can you please assist? Thank you.

Answer 1

The tutorial is a good start on a solution, but does not quite provide all of the details. There are also some changes that I would make. Here is what I would do to get it working:

• Create the Ajax Handler template and page
• Make sure the link you want to use to open the modal includes the postpopup class and has the post ID in the rel attribute.
• Create a js/ folder in your theme directory
• Download SimpleModal 1.4.1 and place the file in the js/ folder
• Create a custom JavaScript file (site.js) and place it in the js/ folder
• Put the following code in site.js:

.

jQuery(function ($) {
    $('a.postpopup').click(function(){
        id = this.rel;
        $.get('http://yourdomain.com/ajax-handler/?id='+id, function (resp) {
            var data = $('<div id="ajax-popup"></div>').append(resp);
            // remove modal options if not needed
            data.modal({
                overlayCss:{backgroundColor:'#000'}, 
                containerCss:{backgroundColor:'#fff', border:'1px solid #ccc'}
            });
        });
        return false;
    });
});

• Add the following code to your theme's functions.php file:

.

function my_print_scripts() {
    if (!is_admin()) {
        $url = get_bloginfo('template_url');
        wp_enqueue_script('jquery-simplemodal', $url . '/js/jquery.simplemodal.1.4.1.min.js', array('jquery'), '1.4.1', true);
        wp_enqueue_script('my_js', $url . '/js/site.js', null, '1.0', true);
    }
}
add_action('wp_print_scripts', 'my_print_scripts');

---

That should get it working for you. Make sure you have the wp_footer() function in your theme's footer. I re-worked the way the modal window was being called so that the auto-centering of the content works.