adding css to wordpress when shortcode is used

Question

I can't seem to get this function to work and was wondering if someone could take a look for me.

I have some static pages that use a special form, I don't want/need the css loaded on every page of the site though.


function skyform_check_function() {
    global $post
    if (has_shortcode( $post->post_content, 'skyform_function')) {
        wp_enqueue_script( 'add_skyform_css_function');
    }
}
add_action ('wp_enqueue_scripts', 'skyform_check_function');

[skyform_function] is the shortcode for the form function add_skyform_css_function() adds the css. <- this work fine if I just do add_action ('wp_head', 'add_skyform_css_function');

function add_skyform_css_function () {
?>
    <link rel="stylesheet" href="/assets/sky-forms/css/sky-forms.css">
    <!--[if lt IE 9]><link rel="stylesheet" href="assets/sky-forms/css/sky-forms-ie8.css"><![endif]-->

    <script src="/assets/sky-forms/js/jquery.min.js"></script>
    <script src="/assets/sky-forms/js/jquery-ui.min.js"></script>
    <script src="/assets/sky-forms/js/jquery.form.min.js"></script>
    <script src="/assets/sky-forms/js/jquery.validate.min.js"></script>
    <script src="/assets/sky-forms/js/jquery.maskedinput.min.js"></script>
    <script src="/assets/sky-forms/js/jquery.modal.js"></script>

    <!--[if lt IE 10]><script src="/assets/sky-forms/js/jquery.placeholder.min.js"></script><![endif]-->        

    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <script src="/assets/sky-forms/js/sky-forms-ie8.js"></script>
    <![endif]-->
<?php
}

try using get_template_directory_uri() . to load your scripts. See codex.wordpress.org/Function_Reference/wp_enqueue_script — Devin
– Devin, Commented Sep 3, 2014 at 3:07

Brian Dillingham · Accepted Answer · 2014-09-03 13:11:51Z

2

First register your shortcode with add_shortcode or you will not be able to use has_shortcode

The short code needs to be registered with add_shortcode() to be recognized.

function skyform_check_function() {
    global $post;

    if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'skyform_function') ) {
        add_action ('wp_head', 'add_skyform_css_function');
    }
}

add_action('wp_enqueue_scripts', 'skyform_check_function');

add_shortcode('skyform_function', 'skyform');

function skyform() {
    // your shortcode
}

and add you're code to wp_head, because wp_enqueue_script is script by script, not echoing a block.

edited Sep 3, 2014 at 13:11

answered Sep 3, 2014 at 4:34

Brian Dillingham

9,3763 gold badges30 silver badges47 bronze badges

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

1 Comment

Brian Dillingham Over a year ago

This code will work in conjunction with add_skyform_css_function tested it.

Collectives™ on Stack Overflow

adding css to wordpress when shortcode is used

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related