• So I have a large banner/background image on my pages that I have wrote a function for that sources the image from the “Featured Image” of the post/page.

    http://dev.jamiepoole.me/leddesign/WordPress/

    It basically just checks if the Featured Image is set, if it is – breaks PHP and writes CSS, using the post_thumbnail URI as the background: url of the DIV element – and if not breaks PHP and writes CSS to place a default banner.

    Here is my function:

    function LedDesign_Banner(){
    	global $post;
    	$bgimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "Full");
    	if (!empty($bgimage)) {
    ?>
    <style id="LedDesign-Custom-Banner" type="text/css">
    hgroup{ background-image: url('<?php echo $bgimage[0]; ?>'); }
    </style>
    <?php
    	}
    	else {
    ?>
    <style id="LedDesign-Custom-Banner" type="text/css">
    hgroup{ background-image: url(<?php bloginfo('template_url'); ?>/images/bgr_home.jpg); }
    </style>
    <?php
    	}
    }
    
    add_action('wp_head', 'LedDesign_Banner');

    It works fine – but I can’t help but feel that this is messy. I don’t like that it just plops the CSS right in the head.

    I’m thinking I should get it to call a JavaScript file or create a new CSS sheet and link to that. Thoughts?

    How would you suggest this could be cleaned up? (again, this method works fine – I just have a perfectionist/OCD obsession with it not being neat)

  • The topic ‘What's the best way to inject CSS from functions.php?’ is closed to new replies.