Home/ Questions/Q 8437857
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T07:33:02+00:00

Can I use third party jquery plugins in my wordpress plugin? Can’t find anything

  • 0

Can I use third party jquery plugins in my wordpress plugin? Can’t find anything about this. What would the structure look like? Would I enqueue the script like I’m working in a theme? I’m pretty new to wordpress.

Also does my plugin need a doctype and a head tag and all of that? I’m guessing not?

I’m trying to take a non-wordpress script and turn it into a plugin. Here’s my code, I’m using this 3rd party plugin – http://filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with/

<?php

/*

Plugin Name: Crashboard

Description: a crash test

Version: 0.3

Author: Fuzzy Logic

License: GPL2

*/

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>CrashBoard</title>
<link href="css/basic.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://filamentgroup.github.com/EnhanceJS/enhance.js"></script> 
<script type="text/javascript" src='js/visualize.jQuery.js'></script>
<link href='css/visualize.css' type="text/css" rel="stylesheet" />     
<link href='css/visualize-light.css' type="text/css" rel="stylesheet" />    
<style>
#chart{
    display: none;
}

#chart7{
    display: none;
}

#gross{
    display: none;
}

#gross7{
    display: none;
}

#table_2 {
margin-left: 550px;
margin-top: -668px;
margin-bottom: 474px;
}

#sevenchart {
margin-left: 520px;
margin-top: -450px;
}

#sevengross{
margin-left: 260px;
margin-top: -30px;
}

#thirtychart {
margin-top: -38px;
margin-left: 22px;
}

#thirtygross {
margin-top: -38px;
margin-left: 22px;
margin-bottom: 15px;
}

#chart thead, td{
min-width: 60px;
}
</style>            
<script type="text/javascript">            
    $(document).ready(function(){

        $('#table').visualize({type: 'area', width: 950, height: 270}).appendTo('#thirtychart');

    });
</script>
</head>
<body>
<br/>
<table id="table">
<caption>30 Day Sales Overview</caption>
<thead>
    <tr>
        <td></td>
        <th scope="col">Units Sold</th>
        <th scope="col">Total Value Sold</th>
        <th scope="col">Total Clicks from Referrals</th>
        <th scope="col">Total Referrals to Sales</th>
        <th scope="col">Total commission Paid Out</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <?php

        global $wpdb;

        $y='';

        for($i=30; $i>=0; $i--){

            $the_time = time() - ($i * 24 * 60 * 60);

            $the_date = date('m-d', $the_time);

            echo "<th scope=\"row\">" . $the_date . "</th>";

            $day_quant = '';

            $day_gross = '';

            $day_clicks = '';

            $day_completes = '';

            $day_payments = '';

            $iminus1 = '';

            $iminus1 = $i-1;

            $ipn_list = $wpdb->get_results("Select * FROM paypal_ipn WHERE paypal_date >= DATE_SUB(NOW(), INTERVAL $i day) AND paypal_date <= DATE_SUB(NOW(), INTERVAL $iminus1 day)");

            if($ipn_list!=null){

                foreach( $ipn_list as $ipn_data ){

                    $order_quant = $ipn_data->quantity;

                    $day_quant += $order_quant; 

                    $order_gross = $ipn_data->payment_gross;

                    $day_gross += $order_gross; 

                }

                echo "<td>" . $day_quant . "</td>";
                echo "<td>" . $day_gross . "</td>";  


            }else{

                echo "<td>0</td>"; 
                echo "<td>0</td>";  

            }

            $affiliate_list = $wpdb->get_results("Select * FROM wp_affiliatedata WHERE paypal_date >= DATE_SUB(NOW(), INTERVAL $i day) AND paypal_date <= DATE_SUB(NOW(), INTERVAL $iminus1 day)");

            if($affiliate_list!=null){

                foreach( $affiliate_list as $affiliate_data ){

                    $refer_clicks = $affiliate_data->uniques;

                    $day_clicks += $refer_clicks;   

                    $refer_completes = $affiliate_data->completes;

                    $day_completes += $refer_completes; 

                    $refer_payments = $affiliate_data->payments;

                    $day_payments += $refer_payments;   

                }               

                echo "<td>" . $day_clicks . "</td>";
                echo "<td>" .  $day_completes . "</td>";
                echo "<td>" .  $day_payments . "</td>";   

            }else{

                echo "<td>0</td>";
                echo "<td>0</td>";
                echo "<td>0</td>"; 
                echo "</tr>";   

            }


            }
        ?>

</tbody>
</table>

I want to make this a dashboard widget, so from what I’ve seen, I need to put the main script into 1 function and register the function..but how would third party jquery and css fit into that, if at all? Thanks so much for the help in advance!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Amazing article, found everything I was looking for – http://www.jdmweb.com/resources/jquery_to_wordpress_plugin

    Here’s the code I needed with Fancybox as the example 3rd-party jquery plugin:

    //Group the code inside a function
function fancybox_wp_setup(){
  wp_enqueue_style(
  "jquery.fancybox", WP_PLUGIN_URL."/jQuery2Wp_fancybox/jquery.fancybox-1.3.1.css", 
  false, "1.3.1");

  wp_enqueue_script("jquery");

  wp_enqueue_script(
  "jquery.fancybox", WP_PLUGIN_URL."/jQuery2Wp_fancybox/jquery.fancybox.js", 
  array("jquery"), "1.3.1",1);  

  wp_enqueue_script(
  "jquery.fancyboxsetup", WP_PLUGIN_URL."/jQuery2Wp_fancybox/fancybox-setup.js", 
  array("jquery","jquery.fancybox"), "",1);
}
    • 0