CODEWITHSUNDEEP
javascriptphpjquerywordpress
Jaffer Wilson
Jaffer Wilson

Reputation: 7273

No error no execution while writing Wordpress plugin

The following is my php code for the plugin:

<html>
<head>
    <title>Grid Demo</title>
    <link rel="stylesheet" href="css/style.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="js/fixtures.js"></script>
    <script src="js/gridList.js"></script>
    <script src="js/jquery.gridList.js"></script>
    <script src="js/load.js"></script>
</head>

<?php

/*
Plugin Name: Testingplugin
Plugin URI: http://localhost
Description: Trying plugin for the first time.
Version: 1.0
Author: AIMS
Author URI: http://localhost
License: A "Slug" license name e.g. GPL2
*/
// Exampe is from the https://www.youtube.com/watch?v=GAwPa4fP90c
add_action('admin_menu', 'myfirstpluginactions');

function myfirstpluginactions(){
    add_options_page('Title_of_the_plugin','name_of_submenu','manage_options', __FILE__,'display_menu_page');
}

function display_menu_page(){
        ?>



    <body>
    <div class="header">
        <a href="#remove-row" class="button remove-row">-</a>
        <a href="#add-row" class="button add-row">+</a>
        <p>
            <a class="github-button" href="https://github.com/hootsuite/grid" data-style="mega" data-count-href="/hootsuite/grid/stargazers" data-count-api="/repos/hootsuite/grid#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star hootsuite/grid on GitHub">GitHub</a>
        </p>
    </div>
    <div class="grid-container">
        <ul id="grid" class="grid">
            <li class="position-highlight">
                <div class="inner"></div>
            </li>
        </ul>
    </div>
    <script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>


    <?php
}

I am using the Hootsuite Grid Repository for displaying the dragable elements using the plugin. The problem is I could not get the output and nor I am getting any error. My guess is the problem with the inclusion of the js.

I have included all the js in the js folder of my plugin. Kindly, let me know what might be the cause and what I can do to improve the code.

Here is the output that I get on the screen:

output image

And this is what I was expecting:

expected image

Upvotes: 0

Views: 45

Answers (1)

Rob Barfield
Rob Barfield

Reputation: 51

You want to add the JS using the wp_enqueue_script() functions, then use plugins_url() to get the path to the JS files.

Something along the lines of added to you plugin initial function:

wp_enqueue_script( 'custom-script-new-name-for-each-script', plugins_url( 'js/fixtures.js', FILE ), array( 'jquery', 'jquery-ui-core' ), time(), true );

Also

wp_enqueue_style( plugins_url( 'css/style.css', FILE ) ); for your CSS.

Do the above for each one of your JS files in the plugin folder. Removing the header html you have added, and no need to the jquery stuff as WP will add it as a requirement.

Your function would become:

function myfirstpluginactions(){
    add_options_page('Title_of_the_plugin','name_of_submenu','manage_options', __FILE__,'display_menu_page');

wp_enqueue_style( plugins_url( 'css/style.css', FILE ) );
//Add this for each of your JS scripts
wp_enqueue_script( 'custom-script-new-name-for-each-script', plugins_url( 'js/fixtures.js', FILE ), array( 'jquery', 'jquery-ui-core' ), time(), true );

}

or another way would be to wrap your current code with PHP to get the right paths to the JS e.g change

<script src="js/fixtures.js"></script>

to

<script src="<?php echo plugins_url( 'js/fixtures.js', FILE); ?>"></script>

Upvotes: 2

Related Questions