Geek asks and answers

Using simplemodal with wordpress

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

I tried following this guide: http://wordpressthemescollection.com/ajax-wordpress-post-popup-with-simplemodal-and-jquery-488.html , but the instructions are not very clear for people without advanced knowledge of jQuery or Wordpress, and this just doesn't work for me. The author does not explain where you put the function, for example.

For those who got a simplified job in Wordpress without developing a plugin, could you help? Thank.

+1
source share
1 answer

The study guide is a good start to a solution, but does not completely provide all the details. There are also some changes that I would make. Here is what I would do to make it work:

  • Create an Ajax Handler Template and Page
  • Make sure that the link you want to use to open the modality includes the class postpopupand has the message identifier in the attribute rel.
  • Create a folder js/in the themes directory
  • Download SimpleModal 1.4.1 and put the file in the folderjs/
  • Create a custom JavaScript file ( site.js) and put it in a folderjs/
  • 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 the topic functions.php:

.

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');

. , wp_footer() . , , .

+3

More articles:


All Articles