wordpress plugin unexpected characters

Question

I have enqueued a php file which contains CSS. Everything works except wordpress is throwing a fit when I activate the plugin.

The plugin generated 1230 characters of unexpected output during activation. If you notice “headers already sent” messages, problems with syndication feeds or other issues, try deactivating or removing this plugin.

Here is what I have above my CSS in my php file. <?php // We'll be outputting CSS header('Content-type: text/css'); ?>

It seems Wordpress is not expecting the CSS inside the PHP file. But it does work. I've read in other places to just add the header content-type text/css and everything should be fine. But Wordpress doesn't like this. Can someone help?

Did you look at what the 1230 characters are? Are they your CSS from your php code? As the Wordpress response says, you can't do this - sending output before everything is set up. Could you show us how you are doing the enqueuing? — A Haworth
It is definitely the CSS. When I add or remove any CSS, the character count changes in the error display message. I don't enqueue this file actually, I include it. Here is the code to do that. include( plugin_dir_path( FILE ) . 'dynamicstyles/style.php'); — bagarangmeetsruffio
wordpress.stackexchange.com/questions/129259/… Looks like I needed to put it inside a callback and hook the callback into the head via wp_head. I'm not exactly sure I know why this solved the problem but the error does not display anymore. Hmmm. — bagarangmeetsruffio
I added this <?php function wpse_129259_enqueue_dynamic_css() { // Grab your variable global $data; ?> <style type="text/css"> and then this after the CSS </style> <?php } add_action( 'wp_head', 'wpse_129259_enqueue_dynamic_css' ); — bagarangmeetsruffio
If you understand as to why this solved the problem, can you please add an answer so I can mark this as resolved. Perhaps it can help others if there was an explanation. — bagarangmeetsruffio

A Haworth A Haworth · Accepted Answer · 2020-11-02T07:22:47

The problem is that we want to write some style code into the frontend but Wordpress was complaining that the headers had already been sent.

This means that something had echoed characters before Wordpress had got round to setting up the headers. It turned out that the problem was sending some CSS too early.

We want this CSS to be in the <head>and Wordpress provides us with a way of doing that with one of its action hooks, wp_head.

What the plugin needs to do is ask WP to add a style element with its attendant styling into the head element at the appropriate time. This is achieved by adding the action like this:

function pluginprefix_hook_css() {
    ?>
        <style>
          all the style we want to add here
        </style>
    <?php
}
add_action('wp_head', 'pluginprefix_hook_css');

Note: I have added 'pluginprefix' to the name of the function, and in fact you can call the function what you like, but it is advisable to have a unique prefix for your own plugin so that it cannot clash with any other name used either by Wordpress itself or by another plugin.

wordpress plugin unexpected characters

1 Answers