Shortcode for CPT post content in a page

Question

I use the Wiz theme along with a plugin I'm coding. The Wiz theme comes with Visual Composer bundled and theme options for pages (header, sidebar, footer and the like). However those options are available only for pages, not for posts. My customer needs to create posts, not pages, because he uses a custom post type I've coded in the plugin. I have then created a post with Visual Composer, that my customer can clone and edit in a new post, and a shortcode [dw_evento] that is supposed to insert the contents of a post in a page. The PHP code of the shortcode is:

public static function dw_evento()
{
  global $wp_filter, $merged_filters, $wp_current_filter;
  global $post;

  $post_id = $_GET['post_id'];
  if (is_array($atts))
    extract($atts, EXTR_OVERWRITE);
  if (empty($post_id))
    return;
  $save_wp_filter = $wp_filter;
  $save_merged_filters = $merged_filters;
  $save_wp_current_filter = $wp_current_filter;
  $post = get_post($post_id);
  setup_postdata($post);
  $content = $post->post_content;
  $content = apply_filters('the_content', $content);        
  //$content = do_shortcode($content);
  $content = str_replace(']]>', ']]>', $content);

  $wp_filter = $save_wp_filter;
  $merged_filters = $save_merged_filters;
  $wp_current_filter = $save_wp_current_filter;
  return $content;
}

Then I've created a page containing only that shortcode, so I can set theme options (header, sidebar, footer) for that page. Finally my plugin shows the post archive and links each item of the list to the page containing only the shortcode, passing the post_id in $_GET.

The problem is that post contents do not render the same way when browsing the post directly with its permalink, and when browsing the corresponding page with my shortcode.

Let alone what's around the content, because that depends on missing options for posts, here you can see the difference in the content between post and page:

Here is the post browsed by its permalink: http://www.miglioredirazzareport.eu/evento_type/internazionale-di-bari-2/

And here is the same post rendered in the page with the shortcode [dw_evento]: http://www.miglioredirazzareport.eu/evento/?post_id=3753

As you can see the page renders differently, in particular it lacks the horizontal lines. That fragment of the generated HTML is identical in the two documents, e.g. for the trophy it is:

<div class="uvc-heading-spacer line_with_icon" style="topheight:32px;">
  <div class="ult-just-icon-wrapper ">
    <div class="align-icon" style="text-align:center;">
      <div class="aio-icon circle "  style="color:#f67207;font-size:32px;display:inline-block;">
        <i class="Defaults-trophy"></i>
      </div>
    </div>
  </div>
</div>

However the applied CSS rules differ a bit. Looking at what CSS rules get applied in the page (Inspect in Chrome) I see a "::after" in the post that is missing in the page:

<div class="uvc-heading-spacer line_with_icon" style="topheight:32px;">
  <div class="ult-just-icon-wrapper ">
    <div class="align-icon" style="text-align:center;">
      <div class="aio-icon circle "  style="color:#f67207;font-size:32px;display:inline-block;">
        <i class="Defaults-trophy"></i>
      </div>
    </div>
  </div>
  ::after
</div>

and that "::after" makes the relevant CSS classes be applied and make the horizontal lines show up:

#ultimate-heading-447156b22ea4f2bf9 .uvc-heading-spacer.line_with_icon:before, #ultimate-heading-447156b22ea4f2bf9 .uvc-heading-spacer.line_with_icon:after {
    width: 182px;
    border-style: solid;
    border-color: #ccc;
    border-bottom-width: 1px;
}

Now the problem comes from a CSS file that is not being included when Wordpress generates the page. You can see from the document source that the section of the page is linking all the CSS but one, i.e. this one:

<link rel='stylesheet' id='ultimate-style-min-css'  href='http://www.miglioredirazzareport.eu/wp-content/plugins/Ultimate_VC_Addons/assets/min-css/ultimate.min.css?ver=3.13.7' type='text/css' media='all' />

which is exactly the CSS file that contains the "uvc-heading-spacer.line_with_icon:after" class reported above.

Now I'm pretty sure I can add that file myself by hooking the "wp-head" action, but that would make my plugin artificially dependent on the Ultimate VC Addons plugin, which has nothing to do with mine.

Why isn't WordPress inluding that stylesheet in my page?

Answer 1

I've found a wordaround that "solves" the problem, but I'm not going to accept this as an answer until I'm not sure it is the only solution (which I suspect it is not).

I can tell WP is not including the Ultimate VC Addons (UVCA from now on) CSS because my page does not contain any UVCA shortcode, or, at least, the initial page content doesn't. Shortcodes in WP are not recursive. If a shortcode generates output that contains other shortcodes, it is responsibility of the programmer to handle those shortcodes. I actually call

$content = apply_filters('the_content', $content); 

but that is not enough to include the required CSS, because the wp-head action has already run by that time. I guess that in the wp-head action, be it in the WP code or in the UVCA code, there must be a snippet like:

foreach ($registered_shortcodes as $shortcode)
  if (strpos($page_content, $shortcode) !== FALSE)
    output_link_tags(get_dependencies($shortcode));

(beware, this is almost pseudo-code and the identifiers are made up). So, forcing a UVCA shortcode to be present in the page content from the beginning, makes WP (or UVCA) include the required CSS withtout making my code dependent on the UVCA plugin.

I "solved" this by editing my page with my [dw_elenco] shortcode and adding this:

<div style="display: none;">[ultimate_heading main_heading="x"][/ultimate_heading]</div>

That can't be the best solution around and it reflects a bug for sure. The bug can be in my code (likely), in UVCA code (also likely) or in WP code (unlikely). Moreover the solution is not generic. If, one day, my customer adds some other plugin with other shortcodes that need a custom CSS, this solution will fall short.

However it is the best solution I've found so far.

EDIT: I can now accept my answer because, despite not being the only solution, there is no clean solution to this problem. More details in my other, more general question here.