0

I wrote a custom plugin and when activated it breaks my ajax for wpdatatables. I have found that it is my CSS that is breaking this. How would I go about running the CSS code ONLY on that one page?

<?php
/*
Plugin Name: Remove From Club
Description: Submit to remove.
Version: 1.0
Author: Diamond Dave    
*/



$display_name =  $current_user->display_name;



?>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<?php

// Create shortcode for the form
function custom_form_shortcode() {
            
    ob_start(); ?>
    <h2>Remove From Club Form</h2>
   <?php 
    $current_user = wp_get_current_user();
    $user_name = $current_user->display_name;
    ?>
    <p>Welcome, <?php echo $user_name; ?>!</p>
   <form method="POST" action="" enctype="multipart/form-data" width="50%" class="swag">
       <div class="form-group col-md-12">
    <input type="text" class="form-control"  id="exampleInputEmail1" name="submitname" aria-describedby="emailHelp" value="<?php echo $user_name ?> " readonly >
  </div><br />
     
       <div class="form-group col-md-12">

    <input type="text" class="form-control"  id="exampleInputPassword1" name="brothername" placeholder="Brother Name">
  </div><br />

  <div class="form-group col-md-12">

    <input type="text" class="form-control" id="exampleInputPassword1" name="clubname" placeholder="Clan Name">
  </div><br />

  <div class="form-group col-md-12">

    <input type="text" class="form-control" id="exampleInputPassword1" name="female" placeholder="Valkyrie Name (If on Roster)">
  </div><br />

  <div class="form-group col-md-12">

    <input type="hidden" class="form-control" id="exampleInputPassword1" name="status" placeholder="status" Value="Pending">
  </div><br />
            <div class="form-group col-md-4">
                <button class="btn btn-primary" type="submit" name="upload">Submit</button>
            </div>
        </form>
    <?php
    $content = ob_get_clean();
    return $content;
}
add_shortcode('custom_form', 'custom_form_shortcode');

// Process form submission
function custom_form_submission() {
    if(isset($_POST['submitname'])){
        // Retrieve form data
        $submitname = sanitize_text_field($_POST['submitname']);
        $brothername = sanitize_text_field($_POST['brothername']);
        $female= sanitize_text_field($_POST['female']);
        $status = sanitize_text_field($_POST['status']);
        $clubname= sanitize_text_field($_POST['clubname']);
        
        // Insert data into database
        global $wpdb;
        $table_name = $wpdb->prefix . '1_remove_brother';
        $wpdb->insert(
            $table_name,
            array(
                'submitname' => $submitname,
                'brothername' => $brothername,
                'female' => $female,
                'status' => $status,
                'clubname' => $clubname
            )
        );

        // Send email
        $to = "MYEMAILADDR";
        $subject = "Remove From Roster Submission";
        $message = "Submitter's Name: $submitname\nBrother's Name: $brothername\nValkyrie: $female\nStatus: $status\nClan Name: $clubname";
        $headers = "From: [email protected]";

        wp_mail($to, $subject, $message, $headers);
        echo "<p>Email sent successfully</p>";
    }
}
add_action('init', 'custom_form_submission');


Breaks Code: https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css

I have tried this but not working. it removes the css completely.


if (have_posts()) {
    while (have_posts()) {
        the_post();
        global $post;
        if ($post->ID == 7293) {
            ?>
            <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
            <?php
        } else {

        }
    }
}
1
  • So I did find a solution. Another plugin that i can add the css to the head on that page edit only. I still would like to know a way to do this without a plugin though.
    – Diamond D
    Commented May 4 at 0:45

1 Answer 1

0

Don't inject JS or CSS directly like this; use WordPress's enqueuing system instead.

add_action( 'wp_enqueue_scripts', 'wpse425304_add_css' );
function wpse425304_add_css() {
  wp_enqueue_style(
    'bootstrap',
    'https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'  
  );
}

References

1
  • 1
    Thank you. This cleared it up.
    – Diamond D
    Commented May 4 at 3:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.