I want to view & update the buffer with html "<head>" data section in it, after the head has been generated.
Problem statement:
I have created some shortcodes in a plug-in which, if present on a page, also require some CSS formatting to be included. The CSS should be included in the section as a link to a CSS file. In the shortcode processing, I wp_enqueue_style()'ed the CSS, but since the shortcode processing occurs during the body processing, (after the wp_header processing is complete), the enqueued style is inserted in the html at the end of the <body> section, not in the <head> section.
The Goal:
Insert a script in the <head> section only if the shortcode is used in the page.
The Approach:
I want to get the memory variable that holds the html during the body processing, and insert my script reference just before the </head> tag.
Key factors
The CSS significantly changes the look & feel of the page, so not having the CSS preloaded via the <head> section reference makes the page change and jump about unpleasantly as it is being loaded. And CSS should not be loaded in the body anyway.
Other approaches I could use ...
1) Load the CSS before I know that the shortcode is actual in use in the page. It is bad practice to load stuff that is only used on a couple pages out of 30 pages. (I could share multiple examples of popular plugins that do this and cause noticeable performance degradation on every page)
2) Embed my styling in the html, or enough of it to not have the page change and jump about. Yeah, but that’s bad practice also.
Current (undesired) Code - my-plugin.php
function tf_schedule_load_scripts() {
// this CSS gets put in the <body> - I need it in the <head>
wp_enqueue_style( 'tf-sched', plugins_url ( 'tf-sched.css', __FILE__ ) );
}
function tf_phonebook_shortcode() {
add_action( 'wp_enqueue_scripts', 'tf_schedule_load_scripts' );
ob_start();
echo "<div class='tf-sched'> ...important stuff here... </div>";
return ob_get_clean();
}
add_shortcode('TF_PHONE_BOOK', 'tf_phonebook_shortcode');
Potential Version of Desired Code
function tf_phonebook_shortcode() {
// create the css script reference to add to the already generated <head> section
$scr_name = plugins_url ( 'tf-sched.js', __FILE__ );
$embed_scr = "<link rel='stylesheet' id='tf-sched-css' href='". $scr_name ."' type='text/css' media='all' />";
$embed_scr .= "</header>";
// add to the header after it have been generated.
// But this buffer name doesn't really exist
global $HTML_BUFFER;
str_ireplace( "</header>", $embed_scr, $HTML_BUFFER);
ob_start();
echo "<div class='tf-sched'> ...important stuff here... </div>";
return ob_get_clean();
}
add_shortcode('TF_PHONE_BOOK', 'tf_phonebook_shortcode');