Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have a shortcode that iterates through a list of custom post types and, as part of displaying them, creates a block. In HTML5, it is illegal to have a style block outside the header (maybe in other versions too, but we are using HTML5).

I am looking for a way that my shortcode can insert its block into the head. Any suggestions?

This is the page: http://2011.solarteam.org/sponsors/gift-recognition/view-of-living-room

The shortcode is called twice on a page.
Once like this [interactive slug='sponsor-map-living-room' show="image"]Select an item to learn more about its sponsor.[/interactive] to make the image.
Once like this [interactive slug='sponsor-map-living-room' show='list' headertitle='WaterShed Featured Sponsors: Living Room' /] to make the list at the bottom.

I can't put it in the template because the template does not know which slug goes on which page.


Here is a simplified version of the shortcode processing code:

<ul><?
foreach($map->points as $point){
    $result = "";
    if(!in_array($point->pointer_type, $all_styles['regular'])){
        $all_styles['regular'][$point->pointer_type] = "
            .pointer_style_" . $point->pointer_type . " {
                width: " . $point->pointer_width(). "px;
                height: " . $point->pointer_height(). "px;
                background: transparent url('/images/interactive/pointers/" . $point->pointer_URL() . "');
            }
        ";
    }
    ob_start(); ?>
    <li class="tag_point sponsor_data_point pointer_style_<?php echo $point->pointer_type?>" id="point_<?php echo $point->ID ?>" data-in="#point_<?php echo $point->ID ?>_info" data-hover-style="pointer_s_style_<?php echo $point->selected_pointer_type?>" style="left:<?php echo $point->x - ($point->pointer_width()/2) ?>px;top:<?php echo $point->y - ($point->pointer_height()/2)?>px;">
    <div class="tag_info" id="point_<?php echo $point->ID ?>_info">
        <div class="donation-title"><?php echo $point->contribution ?></div>
        <div class="donation-contribution"><?php echo $point->description ?></div>
    </div>
    <?
    $result .= ob_get_clean();
    $result .= "</li>\n";
    echo $result;
}
?>
</ul>
<style type="text/css">
    <?php echo join("\n", $all_styles['regular']); ?> 
</style>

The <style> tag is not allowed there in HTML5, so I want to get it into the head of the page.

share|improve this question
add comment

3 Answers 3

up vote 3 down vote accepted

hook the_posts and inspect each post to see if your shortcode is present, you can use wp_enqueue_style at that point if it is. maybe a bit of regex to check for the presence of the shortcode is the way to go, unfortunately i'm not very good with regex!

function wpse27772_has_shortcode($posts) {
    if ( empty($posts) )
        return $posts;

    $has_shortcode = false;

    foreach ($posts as $post) {
        //check for your shortcode in $post->post_content
        //set $has_shortcode = true if it's found
    }

    if($has_shortcode === true):
        wp_enqueue_style( 'mystyle', get_template_directory_uri().'/mystyle.css' );
    endif;

    return $posts;
}
add_action('the_posts', 'wpse27772_has_shortcode');

EDIT - quick example from my comment below...

function wpse27772_output_styles(){
    global $posts;
    foreach ($posts as $post) {
        // inspect $post->post_content;
        // echo "<style type='text/css'></style>";  
    }
}
add_action('wp_head', 'wpse27772_output_styles');
share|improve this answer
    
I voted this up because it looks useful and shows some thought, but I am not sure if it is the right answer for my question. When I run my shortcode, it loops through a number of elements and outputs their styles. I want to aviod running the loop too many times. I just posted the code that is inside the shortcode processor which should show exactly what my problem is. –  yakatz Sep 6 '11 at 1:06
    
@yakatz - you can hook wp_head and inspect the global $posts and echo inline styles directly within head, but regardless, when the shortcode is parsed it's simply too late to get anything into the document head, i think you're just going to have to do things twice. –  Milo Sep 6 '11 at 1:31
    
Thanks Milo, that is what I was afraid of. –  yakatz Sep 6 '11 at 2:41
    
Good proof of concept, but wish there was a better way to do this... –  Dave Kiss Aug 19 '13 at 20:54
add comment

I happen to know a little more about the requirements of this project so here's my suggestion.

There are a whole bunch of elements that each need the following styles: - Background - Size - Color - Hover behavior - Position

All of these except the position can be saved in a separate stylesheet because they are the same for all the elements.

Pages with this shorttag are also all using a particular template. You can use wp_enqueue_style to include the CSS file on those pages only.

For the few bits of style (the position) that can't be in the separate file because they come from the database, they can be inline, for example <div style"..."></div>.

share|improve this answer
add comment

Couldn't you you save your shortcode as a file?

Example: Open a blank text document and paste your shortcode into it. Next save it as my_shortcode.php. Upload it to your themes root directory, then use

<?php get_template_part('my_shortcode'); ?>

By placing it before the closing head tag it should work. I've never tried it so I'm not positive, but it's worth a shot.

share|improve this answer
    
I can't really do that since the shortcode has different arguments on different pages. I edited the question to show the usage. –  yakatz Sep 5 '11 at 22:40
    
So how do yo plan on placing the shortcode inside the <head> tag as you've mentioned in the question title if not adding it to the header.php file? If you plan on making separate header files to include with specific templates, you could just place the code I've suggested into those custom headers. You don't really need separate header files though if you make use of the options available for specifying the different templates provided by WordPress. If you're not sure what I'm talking about, open up the TwentyTen or TwentyEleven header.php files and take a look at the code. –  Jeremy Jared Sep 6 '11 at 0:26
    
I changed the title to be more clear. I want css to be inserted in the header based on the shortcode that is in the page body. –  yakatz Sep 6 '11 at 0:41
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.