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!

Have you tried caching your css? But why are you even returning html inside a function? — codemax
– codemax, Commented Apr 22, 2017 at 4:05
yes, its exactly my mean. I just lean php by myself, i wrote my plugin for my reaseach, and i did not found best way to return my table. This i my table link: vantran.name/wp-content/uploads/2017/04/… — Văn Cao Trần
– Văn Cao Trần, Commented Apr 22, 2017 at 4:19
Either cache your css or just a frontend framework to deal with displaying an array of data like what you have above — codemax
– codemax, Commented Apr 22, 2017 at 4:25

kinjal jethva · Accepted Answer · 2017-04-22 08:01:30Z

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();
}

edited Apr 22, 2017 at 8:01

answered Apr 22, 2017 at 7:54

kinjal jethva

2792 gold badges6 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Văn Cao Trần Over a year ago

i used init hock and this break my test site. May be my codes are not good at the moment. I will lear more and fix this. Thanks about your idea, i helped me a better way to return my table.

Mervan Agency · Accepted Answer · 2017-04-23 11:46:09Z

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!

Collectives™ on Stack Overflow

Load css before my wordpress plugin

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related