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

check this answer stackoverflow.com/a/38050537/1153703

Bikesh M
– Bikesh M

2016-06-27 09:41:22 +00:00
Commented Jun 27, 2016 at 9:41 — Bikesh M
– Bikesh M, Commented Jun 27, 2016 at 9:41

MrCode · Accepted Answer · 2012-06-05 13:08:19Z

30

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.

answered Jun 5, 2012 at 13:08

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

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

3 Comments

WtFudgE Over a year ago

I tried writing to a css file and then registering it using your code. It loads the CSS file, however I seem to be having the same problems as before. It's the same as when I put it in the header file.

WtFudgE Over a year ago

I noticed that some of the css code works, but some isn't. For example font-size & font-weight on menu links work, but color doesn't seem to change. Any ideas?

MrCode Over a year ago

That will be because your template CSS is overriding your plugin CSS. Take a look at the order of inclusion and CSS specificity: w3.org/TR/CSS2/cascade.html#specificity

mishu · Accepted Answer · 2012-06-05 13:05:05Z

2

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

answered Jun 5, 2012 at 13:05

mishu

5,3971 gold badge23 silver badges41 bronze badges

3 Comments

WtFudgE Over a year ago

This helped me solve the problem! You're right, the "init" is the problem. I changed it to "wp_loaded" and now the contact form works again. Thanks a lot! :)

WtFudgE Over a year ago

Seems i was wrong, it worked locally, but on my host i get: Cannot modify header information - headers already sent by (output started at /home/gnc0081000/domains/claeysparts.be/public_html/wp-content/plugins/easy-styler.php:18) in /home/gnc0081000/domains/claeysparts.be/public_html/wp-includes/pluggable.php on line 866

mishu Over a year ago

@WtFudgE that's the exact same thing, just read the error message. you are printing something before using the header function. It's the same thing I said above but in a part of the script that I don't have access to, but the error message tells you where the error is: in /home/gnc0081000/domains/claeysparts.be/public_html/wp-content/plugins/easy-styl‌er.php at line 18

Saurabh Bhandari · Accepted Answer · 2017-06-13 07:05:26Z

-1

In a plugin dev, do not forget to send the reference of the class ($this)

add_action( 'wp_enqueue_scripts', array($this,'prefix_add_my_stylesheet' ));

edited Jun 13, 2017 at 7:05

Saurabh Bhandari

2,4584 gold badges28 silver badges33 bronze badges

answered Jun 13, 2017 at 6:40

Longshot

1

Comments

WtFudgE · Accepted Answer · 2012-06-08 18:22:15Z

-14

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

answered Jun 8, 2012 at 18:22

WtFudgE

5,2567 gold badges50 silver badges61 bronze badges

1 Comment

MattK Over a year ago

You really do want to switch to using enqueu style. That's going to leave your plugin stronger and less likely to break when new versions of WP come out.

Collectives™ on Stack Overflow

Add CSS to Php Wordpress plugin

4 Answers 4

3 Comments

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related