Add bootstrap to a custom plugin.

  • Resolved danielvieira83

    (@danielvieira83)


    6 years, 7 months ago

    Hello, I need some help. I’m developing a plugin and I need to use Bootstrap on the shortcodes.
    I download Bootstrap and upload it to my-plugin/public/css folder.
    Then I create the function to load the styles, scripts and the shortcode.
    private function define_public_hooks() {
    $plugin_public = new My_Wp_Tools_Public( $this->get_plugin_name(), $this->get_version() );

    $this->loader->add_action( ‘wp_enqueue_scripts’, $plugin_public, ‘enqueue_styles’ );
    $this->loader->add_action( ‘wp_enqueue_scripts’, $plugin_public, ‘enqueue_scripts’ );

    // Add a shortcode to home page.
    $this->loader->add_action(‘mwpt-most-popular-today’, $plugin_public, ‘mwpt_most_popular_today’);
    add_shortcode(‘mwpt-most-popular-today’, array( $plugin_public, ‘mwpt_most_popular_today’));
    }

    Here is the functions to load styles and scripts:
    public function enqueue_styles() {
    wp_register_style( ‘bootstrap-css’, plugin_dir_url( __FILE__ ) . ‘css/bootstrap-4.1.0/dist/css/bootstrap.full.css’, array(), ‘1.0.0’, all);
    wp_enqueue_style(‘bootstrap-css’);
    }
    public function enqueue_scripts() {
    wp_register_script(‘bootstrap-js’, plugin_dir_url( __FILE__ ) . ‘css/bootstrap-4.1.0/dist/js/bootstrap.full.js’, array(‘jquery’), ‘3.3.1’, true);
    wp_enqueue_script(‘bootstrap-js’);
    }

    And the function to create a shortcode example using bootstrap:
    function mwpt_most_popular_today($content) {
    $html = ‘<br><div class=”alert alert-success”>Success! Indicates a successful or positive action.</div>’;
    return $content . $html;
    }

    For some reason the bootstrap its not styling the $html variable, what I’m doing wrong?

    Best regards.

Viewing 15 replies - 1 through 15 (of 26 total)

  • Hi @danielvieira83,

    Considering that you have uploaded bootstrap to my-plugin/public/css folder, the wp_register_style call shouldn’t be
    wp_register_style( 'bootstrap-css', plugin_dir_url( __FILE__ ) . 'public/css/bootstrap-4.1.0/dist/css/bootstrap.full.css', array(), '1.0.0', all); (note the public before css)?

    Some things to consider:
    – If you are registering a CSS and enqueuing it just after you can just use wp_enqueue_style with the URL as a second parameter (and therefore there is no necessity of calling wp_register_style). Same for scripts.
    – Do you know if your enqueue_styles method is called at all? A echo "I'm here"; is a fast way to check it (feel free to research about other better ways of debugging).
    – Did you give a look into your HTML? If you aren’t using any cache plugin and the enqueue_styles method is called, you should have a <link> tag with bootstrap-css as an attribute.

    Thread Starter danielvieira83

    (@danielvieira83)

    Hi, thanks for help!
    When I echo “plugin_dir_url( __FILE__ )” I get “https://…/wp-content/plugins/my-wp-tools/public/&#8221;, thats why I didn’t put “public/” after that variable.
    Yes, I’ve already did an echo on “enqueue_styles” and “enqueue_scripts” and both functions are called.
    Have you have another idea?

    When do you run the define_public_hooks method?

    Thread Starter danielvieira83

    (@danielvieira83)

    This is a WORDPRESS PLUGIN BOILERPLATE.

    That’s a nice boilerplate, I didn’t know this yet.

    Well, that method seems to be call early enough. Did you verify inside the page <head> tag if there is a css being called with bootstrap-css-css as id?

    Thread Starter danielvieira83

    (@danielvieira83)

    This is the Template header. I already change to the default wordpress template and did not works too.

    Thanks, but actually that doesn’t help. You’ll need to see the generated HTML, that sent to your browser when you navigate to some page (sorry if I was unclear).

    Thread Starter danielvieira83

    (@danielvieira83)

    Sorry thats my fault. I’m blind and the console for style is not friendly. Can help if I show the template?

    That helped @danielvieira83, thanks. Unfortunatelly there isn’t a link tag with your css, what means that WordPress isn’t enqueuing your stylesheet ??

    Did you paste your code as it really is? Just noticed that the last parameter of wp_register_style call is missing single quotes, i.e., it is all and should be 'all'.

    Thread Starter danielvieira83

    (@danielvieira83)

    Yes, I think, here is my code. I don’t understand what I’m doing wrong.

    The lines (68 and 69) are commented out. If it’s like that in your server it’ll never be called.

    I’ve made a fork here with the necessary changes, i.e, removing comments, calling only wp_enqueue_style and wrapping all with single quotes. Can you test it?

    • This reply was modified 6 years, 7 months ago by Felipe Elia. Reason: correcting line numbers
    Thread Starter danielvieira83

    (@danielvieira83)

    Here is the changed class.. Sorry the commented code! So, I replaced all what you said but nothing changed. You can also observe now the headers! I’m so sorry, about that commented code, nothing really could appear on your console;)
    Another thing, I really like your plugin! you know, you can query everything but I need that information on a grid view ??
    Thanks once again for help me.

    Moderator bcworkz

    (@bcworkz)

    This may be nothing, but this part might be implemented incorrectly:
    $this->loader->add_action( 'wp_enqueue_scripts', $plugin_public, 'enqueue_styles' );
    Or not. I’ve no idea what class the add_action() method belongs to, so it may be fine, but that is not how the WP procedural add_action() is used. It’s used like this:
    add_action( 'wp_enqueue_scripts', array( $plugin_public, 'enqueue_styles'));
    It might be worth a try using the procedural function to see if it causes the link tag to appear on your page. If it does, you would focus your debugging efforts on how $this->loader->add_action() is used and what it does.

    BTW, when you post code in these forums, please demarcate it with backticks, or use the code button. When you fail to do this, the code gets corrupted and it becomes difficult for others to troubleshoot and test your code. When you have large chunks of code to post, it’s better to use gist like you have recently done. Gist’s syntax highlighting is useful to many people. And it doesn’t corrupt code ??

    Thread Starter danielvieira83

    (@danielvieira83)

    yes, I’m sorry, I’m blind and I didn’t see the result. I will use gist.

    Thread Starter danielvieira83

    (@danielvieira83)

    In order to agille the process I uploaded the plugin to my repository.. That way, may be used by other interested people who are using the wordpress popular posts plugin too or who knows be added to it if the developer its interested.

Viewing 15 replies - 1 through 15 (of 26 total)
  • The topic ‘Add bootstrap to a custom plugin.’ is closed to new replies.