Using shortcodes to display conditional data is a common approach in WordPress. When the plugin contains many script and style files, we need to include them only when a shortcode is present in a post or page.
Use has_shortcode()
This is a straightforward approach. has_shortcode( string $content, string $tag )
determines whether the passed content contains the specified shortcode.
If the current page is a post and its content contains our defined shortcode, color_shades
, the script will be enqueued with wp_enqueue_script
function.
function color_shortcode_scripts() { global $post; if( get_post_type($post) == 'post' && has_shortcode( $post->post_content, 'color_shades') ) { wp_enqueue_script('color-script', plugin_dir_url(__FILE__).'color-script.js' ); } } add_action( 'wp_enqueue_scripts', 'color_shortcode_scripts');
Use class
We use a variable to store a boolean value to determine whether a shortcode exists. When color_shades_render (shortcode handler) is called, the value is set to true. Then we use it as a condition to print styles and scripts.
class ColorShadesShortcode { //allow script when the shortcode exists in a post static $hasShortcode; static function init() { add_shortcode('color_shades', array(__CLASS__, 'color_shades_render')); add_action('init', array(__CLASS__, 'register_scripts')); add_action('wp_footer', array(__CLASS__, 'print_scripts')); add_action('wp_head', array(__CLASS__, 'print_styles')); } static function color_shades_render($atts) { self::$hasShortcode = true; extract(shortcode_atts(array( 'color_name' => 'orange', ), $atts)); $output = "show list of orange's shades here"; return $output; } //register scripts and styles static function register_scripts() { wp_register_script('script-name', plugins_url('script-name.js', __FILE__), array('jquery'), '1.0', true); wp_register_style( 'style-name', plugins_url( 'style-name.css', __FILE__ ), true, '', 'all' ); } //print scripts if shortcode_name exists static function print_scripts() { if (!self::$hasShortcode) return; wp_print_scripts('script-name'); } //print styles if shortcode_name exists static function print_styles() { if (!self::$hasShortcode) return; wp_print_styles( 'style-name' ); } } ColorShadesShortcode::init();