mercredi 18 mai 2016

How to reference css and js in wordpress plugin (and create the right hooks)

I am writing a bootstrap popover plugin for WordPress. What the plugin is supposed to do is output a popover when you hover over <a class= “category_tag">category name</a> on the site, which represents category tags. The bootstrap popover has 2 parts, title and content. I want to output category name on popover title and category description on the content area (body). The script works on local XAMPP PHP-only but not in WordPress. I am having problems referencing my assets. This is my plugin directory tree is here.

What I have done so far is appending data-toggle, title, and data-content to <a class= “category_tag>, on top of adding trigger action to the link to fire up the popover. It works but when I load it in WordPress, my assets don’t show up in view code in the browser and some functionality that requires only jquery doesn’t work even though the twenty-sixteen theme is loading its own jquery, popover.js. and bootstrap.js.

The add_action('wp_footer', 'popover_script') seems to work, sending the script to the footer, as I can see in view code.

This is my my_plugin.php code:

//just testing, I'll pass in proper arguments 
//to popover title and content
$popover_title = "Hi There";
$popover_content = "Popover is a small overlay of content that is used to display secondary information of any element when it is clicked by a user, like those on the iPad.";
?>

<?php
add_action('wp_footer', 'popover_script');

function popover_script() {
    ?>
    <script type="text/javascript">
        $(function () {
            $('a.category_tag').attr('data-toggle', 'popover');
            $('a.category_tag').attr('title', '<?php echo $popover_title; ?>');
            $('a.category_tag').attr('data-content', '<?php echo $popover_content; ?>');
            $('a.category_tag').attr('data-placement', 'auto top');
            $('a.category_tag').popover({trigger: "hover"});
        });
    </script>
<?php
}

My problem is in calling and registering assets. This is my first time with WordPress plugins. How do I enqueue my 5 assets? And how do I add the right hooks to achieve this? Thanks in advance.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire