Add CSS to Php Wordpress plugin

Question

I wrote a simple plugin which sets some css code using wp_options. It all looks similar like this:

add_action('init','easy_style');

function easy_style()
{
    ?>
    <style>
    #header a {
        color: <?php echo get_option('topcolor'); ?>;
        font-size: <?php echo get_option('topsize'); ?>px;
        <?php
            if (get_option('topstyle') == "bold")
            { echo "font-weight: bold;"; echo "font-style: normal;"; }
            elseif (get_option('topstyle') == "italic")
            { echo "font-style: italic;"; echo "font-weight: normal;"; }
            elseif (get_option('topstyle') == "bolditalic")
            { echo "font-weight: bold;"; echo "font-style: italic;"; }
            else { echo "font-weight: normal;"; echo "font-style: normal;"; }
        ?>;
    }

    </style>
    <?php
}

Now this works, but if I activate my "Contact Form 7" plugin, the contact form 7 doesn't work anymore. It can't send any mails. So I think what I do is wrong. If I remove this piece of code, the contact form works again...

I think I do it wrong because the css needs to be loaded in the header, no? So what I thought I would do as a test is put the same code in the header. However then some other css (i don't know where) overwrites these, so this also doesn't work.

I think there are some wp functions to add css code to the header but I don't know how exacly.

Any ideas?

Thanks

Solution 1

I solved my problem by loading in the styles.css file, edit it and save again

Solution 2

A safe way to add CSS to your plugin is to use wp_enqueue_style.

/**
 * Register with hook 'wp_enqueue_scripts', which can be used for front end CSS and JavaScript
 */
add_action( 'wp_enqueue_scripts', 'prefix_add_my_stylesheet' );

/**
 * Enqueue plugin style-file
 */
function prefix_add_my_stylesheet() {
    // Respects SSL, Style.css is relative to the current file
    wp_register_style( 'prefix-style', plugins_url('style.css', __FILE__) );
    wp_enqueue_style( 'prefix-style' );
}

Reference.

Solution 3

Maybe the plugin you are using wants to send some http headers.

Since you are using the init hook (detailed here: http://codex.wordpress.org/Plugin_API/Action_Reference/init) you are running some actions when the plugin developers consider that the headers are not already sent.

But since you send some output (echo some styles) you are forcing the headers to be sent sooner. I suggest you to use another hook that occurs after the output is already started.

Update: you could use the wp_enqueue_style function (reference here: http://codex.wordpress.org/Function_Reference/wp_enqueue_style) as it is the recommended way to display styles. You only need to save those rules in a css file and en-queue it to be loaded before the wp_head function is called