Wordpress Plugin HTML Bootstrap + PHP

user_9177897 0
Viewed 146

I'm creating my first wordpress plugin to show some dashboard data on the wp-admin-page, however only my php code is recognized when I edited my plugin, any html markup I write is omitted.

I want to make my plugin using HTML+bootstrap for the Front-end but make some calculations using PHP but I don't understand how I can do this.

In my first attempt, I could only echo html markup:

<?php
add_action( 'admin_menu', 'test_plugin_setup_menu' );

function test_plugin_setup_menu(){
    add_menu_page( 'Page Title', 'Menu title', 'manage_options', 'test-plugin', 'test_init' );
}

function test_init(){
    echo "<h1> Hello World! </h1>"; 
}
?>/*THIS OUTPUT ON MY WP ADMIN PAGE AS EXPECTED WITH A HELLO WORLD

However I need to write a lot of HTML markup with Bootstrap and only use PHP in some areas but any HTML code I write after my ?> doesn't get show on the page.

Second approach: I referred to my HTML file with PHP

<?php
add_action( 'admin_menu', 'test_plugin_setup_menu' );

function test_plugin_setup_menu(){
    add_menu_page( 'Page Title', 'Menu title', 'manage_options', 'test-plugin', 'test_init' );
}
function test_init(){
    $file = file_get_contents('index.html', FILE_USE_INCLUDE_PATH);
    if($file == false)
    {
        echo 'file not found';
    }
    else
    {
        echo $file;
    }
}
?>

This last attempt indeed shown all my HTML login with my bootstrap styled perfectly on the wp-admin-page but i cant use the PHP logic or DB connections I need on this HTML file..

My question is: how can I use my HTML markup in my PHP plugin simultaneously?

Extra info

I'm very new to PHP and Wordpress so I don't know what am I doing wrong in my code so HTML tags cant be show on the page unless I referred them to an external file.

Any help is greatly appreciated.

bootstrap-4 twitter-bootstrap wordpress html php
1 Answers

Another alternative would be to include your php file. Here's the idea:

add_action( 'admin_menu', 'test_plugin_setup_menu' );

function test_plugin_setup_menu() {
    add_menu_page( 'Page Title', 'Menu title', 'manage_options', 'test-plugin', 'test_init' );
}

function test_init() {
    ob_start();
    include_once 'file-that-i-want-to-include.php';
    echo ob_get_clean();
}

Then of course in your file-that-i-want-to-include.php. Just create your page like you normally do:

<?php

include_once 'mydatabaseconnction.php';

// ... and so on php codes of sorts

?>

<div class="container">
    <div class="row">
        <div class="col">
            my contents whatever
        </div>
    </div>
</div>

In addition, you can just load bootstrap in that specific admin settings page if you'd like:

add_action('admin_enqueue_scripts', function() {

    if (get_current_screen()->id === 'toplevel_page_test-plugin') { // the prefix is "toplevel_page_"
        $css_path = plugins_url('assets/vendor/bootstrap/bootstrap.min.css'); // just change the path going to your css and js
        $js_path = plugins_url('assets/vendor/bootstrap/bootstrap.min.js');
        wp_enqueue_style('latest-bootstrap-css', $css_path, [], '4.5.0');
        wp_enqueue_script('latest-bootstrap-js', $js_path, [], '4.5.0');
    }

});
user_38590270
Related