How to make my shortcode load scripts and styles, from within the plugin?

Question

This sounds like a silly problem, but I was searching for an answer, and couldn’t find anything. And the things that I did find, I tried and didn’t work or were very vague.

Content

  • My Problem
  • What I tried
  • What to do?

My problem

I am building a plugin, where you can use a shortcode. I added the shortcode and build my markup. Outputting the shortcode inside a blog post works great. When I had my styles and scripts inside the markup, it also works. Now I want to have them separated, each in their own file.
I have one folder for all my shortcode related functions and files, so I don’t need to leave the folder to get my styles.css or my scripts.js.
I tried linking to them with various attempts, and nothing seems to work.

What I tried

Using the basic <link> and <script> tag to link to the files inside the markup, obviously didn’t work.

Inside the file where I’m initialising my shortcode:

add_action( "wp_enqueue_scripts", "registerScriptsStyles" );

public function registerScriptsStyles() {
    wp_register_script( 'iw_ShortcodeScript', plugins_url("ShortcodeScript.js", __FILE__ ), "", "1.0.1", true );
    wp_register_style( 'iw_ShortcodeStyle', plugins_url("ShortcodeStyle.css", __FILE__ ), "", "1.0.1" );
    wp_enqueue_script( 'iw_ShortcodeScript' );
    wp_enqueue_style( 'iw_ShortcodeStyle' );
  }

Didn’t work. So I tried

add_action( "init", "registerScriptsStyles" );
add_action( "wp_qneueue_scripts", "enqueueScriptsStyles" );

public function registerScriptsStyles() {
    wp_register_script( 'iw_ShortcodeScript', plugins_url("ShortcodeScript.js", __FILE__ ), "", "1.0.1", true );
    wp_register_style( 'iw_ShortcodeStyle', plugins_url("ShortcodeStyle.css", __FILE__ ), "", "1.0.1" );
  }

  
  public function enqueueScriptsStyles() {
    wp_enqueue_script( 'iw_ShortcodeScript' );
    wp_enqueue_style( 'iw_ShortcodeStyle' );
  }

Also didn’t work.

I read somewhere, that I need to enqueue them inside the page where I want them, so I tried enqueueing them inside the markup for the shortcode, which also didn’t work.

Next, I tried enqueueing them inside the function where I am requiring my shortcode.

add_shortcode(  "Info_Wheel", array(  $this,  "layout"  )  );

public  function  layout()  {
    wp_enqueue_script(  'iw_ShortcodeScript'  );
    wp_enqueue_style(  'iw_ShortcodeStyle'  );
    require  $this->iw_plugin_path .  "/Blocks/Pages/ShortcodeAPI/ShortcodeLayout.php";
}

Also didn’t work.

What to do?

I can’t seem to find a solution to what I want. I must obviously do something wrong, but what is it? Reading the documentaion didn’t help, as they’re too vague for this, in my opinion.

And again, the shortcode works and is being displayed, the only problem is with the Styles and Scripts not being loaded. Below is my current Code in my editor for the Shortcode API.
If anyone could help me out, that would be great.

<?php

namespace BlocksPagesShortcodeAPI;
use BlocksBaseController;

class  Shortcode  extends  Controller  {
    public  function  register()  {
        add_action(  "init",  "registerScriptsStyles"  );
        // add_action( "wp_qneueue_scripts", "enqueueScriptsStyles" );
        add_shortcode(  "Info_Wheel", array(  $this,  "layout"  )  );
    }

    public  function  layout()  {
        wp_enqueue_script(  'iw_ShortcodeScript'  );
        wp_enqueue_style(  'iw_ShortcodeStyle'  );
        require  $this->iw_plugin_path .  "/Blocks/Pages/ShortcodeAPI/ShortcodeLayout.php";
    }

    public  function  registerScriptsStyles()  {
        wp_register_script(  'iw_ShortcodeScript', plugins_url("ShortcodeScript.js",  __FILE__  ),  "",  "1.0.1",  true  );
        wp_register_style(  'iw_ShortcodeStyle', plugins_url("ShortcodeStyle.css",  __FILE__  ),  "",  "1.0.1"  );
    }
    
    public  function  enqueueScriptsStyles()  {
        wp_enqueue_script(  'iw_ShortcodeScript'  );
        wp_enqueue_style(  'iw_ShortcodeStyle'  );
    }
}
0
Mahnenwolf 8 months 2020-11-27T03:10:32-05:00 0 Answers 6 views 0

Leave an answer

Browse
Browse