Wordpress Tip: Custom shortcode for including CSS & HTML

If you want to include HTML and/or CSS in your blog post, try adding this to your theme’s functions.php:

function include_func($atts) {
   extract(shortcode_atts(array(
         'html' => '',
         'css' => '',
      ), $atts));
   if ($css!='') {
      global $stylenum;
      if (!isset($stylenum)) $stylenum=0;
      $thisstylename='externalStyle'.$stylenum;
      wp_register_style($thisstylename,'/'.$css);
      wp_enqueue_style($thisstylename);
      $stylenum++;
   }
   if ($html!='') {
      ob_start();
      $filename=getcwd()."/".$html;
      include($filename);
      $output=ob_get_contents();
      ob_end_clean();
      return $output;
   }
}
add_shortcode('include','include_func');

Usage in a wordpress post:

[include html=”someHtmlFile.html” css=”someCSSFile.css”]

Example:
HTML: http://henrykoren.kmz.me/myHTML.html

<h2 class="inc_example">It Works!</h2>

CSS: http://henrykoren.kmz.me/myCSS.css

h2.inc_example { color: #f00; }

Code to include these:
[include html=”myHTML.html” css=”myCSS.css”]

Demo:
[inc html=”myHTML.html” css=”myCSS.css”]

(note: this probably has all sorts of security vulnerabilities…)

Usage in a wordpress post:

Share: