Load css before my wordpress plugin

Question

I have a problem like this:

my_function {
    wp_register_style('ln_table', plugins_url('css/ln_table.css',__FILE__ ));
    wp_enqueue_style('ln_table');

    $arr = array('This', 'is', 'a', 'big', 'array', '...');

    // My table is big and complex, this only a exemple
    return "
        <table class = 'my-css'>
            <tr>
                <td class = 'style1'>$arr[0]</td>
                <td class = 'style2'>$arr[1]</td>
                <td class = 'style3'>$arr[2]</td>
            </tr>
            <tr>
                <td class = 'style4'>$arr[3]</td>
                <td class = 'style5'>$arr[4]</td>
                <td class = 'style6'>$arr[5]</td>
            </tr>
            </tr>
                ...
                ...
                ...
            </tr>
        </table>
    ";
}

When I call my function, the table appear before css, then my css classes were applied. That's bad looking when the page is loading.

How can I apply my css classes first, and then is my table?

This is my table image:

Thank you so much and sorry for my English!

Answer 1

Try Using Hook as below. Hope It May helps.

add_action('init', 'my_function_add_styling');

function my_function_add_styling(){
 wp_register_style('ln_table', plugins_url('css/ln_table.css',__FILE__ ));
 wp_enqueue_style('ln_table');
}

function my_function {
     ob_start();

    $arr = array('This', 'is', 'a', 'big', 'array', '...');

    // My table is big and complex, this only a exemple
   echo "
   <table class = 'my-css'>
   <tr>
     <td class = 'style1'>$arr[0]</td>
     <td class = 'style2'>$arr[1]</td>
     <td class = 'style3'>$arr[2]</td>
  </tr>
  <tr>
    <td class = 'style4'>$arr[3]</td>
    <td class = 'style5'>$arr[4]</td>
    <td class = 'style6'>$arr[5]</td>
 </tr>
</table>
";
  return ob_get_clean();
}

Answer 2

We have tried to build plugin for what you require. Plugin will enqueue the required stylesheet and add shortcode that will produce the table.

/*
Plugin Name: Ln Table
Plugin URI: http://example.com
Description: This will create shortcode that will produce the table with required stylesheet.
Author: Mervan Agency
Version: 1.0
Author URI: http://mervanagency.io
*/

Class LnTable{

    public function __construct(){
        //Enqueuing Stylesheet
        add_action( 'wp_enqueue_scripts', array($this, 'load_stylesheet' ) );

        //Adding Shortcode
        add_shortcode( 'ln-table', array($this, 'table_shortcode') );
    }

    //Callback to enqueue stylesheet
    public function load_stylesheet(){
        wp_register_style('ln_table', plugins_url('css/ln_table.css',__FILE__ ));
        wp_enqueue_style('ln_table');
    }

    //Callback to Add Shortcode
    public function table_shortcode(){
        $arr = array('This', 'is', 'a', 'big', 'array', '...');

        // My table is big and complex, this only a exemple
        ob_start();

        echo "
        <table class = 'my-css'>
            <tr>
                <td class = 'style1'>$arr[0]</td>
                <td class = 'style2'>$arr[1]</td>
                <td class = 'style3'>$arr[2]</td>
            </tr>
            <tr>
                <td class = 'style4'>$arr[3]</td>
                <td class = 'style5'>$arr[4]</td>
                <td class = 'style6'>$arr[5]</td>
            </tr>
        </table>";

        return ob_get_clean();
    }
}

//Initialize Plugin
new LnTable();

Create a Folder in your wp-content/plugins/ as below

ln_table (folder)
---- ln_table.php (Put the above plugin code in this file)
---- css (folder)
--------ln_table.css

After this activate the plugin and use the shortcode [ln-table] wherever you wants to display the table.

Hope this helps you!