Wordpress- A plugin that displays HTML content (Database) with a shortcode

Question

I run a project that has a database in Google Sheets. I need to display that information in Interactive tables.

I used Sheetrock.js and Handlebar.js to do this (I wrote the code and it works as I want it to). I have a WordPress website and I want to make a plugin where I type a shortcode and the table I coded appears on the page.

I have a separate HTML file with embedded styling (under <style></style> tags, no external css file). The file has an HTML boiler plate, and in the <head></head> there are links to sheetrock.js, handlebar.js, and bootstrap.

As far as I understand, php can't display those HTML tags? I tried doing the following...

<?php
function showIco() {
?>
<!DOCTYPE html>
<head>
<!-- all the CDN links  -->
</head>
<style>
<!-- all the styling is here, and I know, it's not DRY -->
</style>
<body>
<!-- The content I want to display (it has <script> tags, and variables) -->
</body>
</html>
<?php
return showIco();
}
add_shortcode ('add_ico','showIco');
?>

Perhaps I am doing something wrong as the shortcode doesn't display the content at all. What do I need to do to make this work?

score 1 · Answer 1 · answered Aug 20 '17 at 08:55

1

You're returning the function, which would cause recursion.

Try:

<?php
function showIco() {
    ob_start();
?>
<!DOCTYPE html>
<head>
 all the CDN links
</head>
<style>
all the styling is here, and I know, it's not DRY
</style>
<body>
The content I want to display (it has <script> tags, and variables)
</body>
</html><?php
    return ob_get_clean();
}
add_shortcode ('add_ico','showIco');
?>

answered Aug 20 '17 at 08:55

Lawrence Cherone

46,049
7
62
106

Hm, it doesn't work - the page doesn't show up anything at all, even the default wordpress theme (it's just a blank page). Maybe the code itself needs to be written in PHP, instead of displaying full HTML file? – Vainius Mykolaitis Aug 20 '17 at 09:37
Check your error logs.. that would be a syntax error somewhere. (not in my example) – Lawrence Cherone Aug 20 '17 at 09:37
Strangely no error logs are displayed.. When I activate the plugin, Wordpress shows this "The plugin generated 1 characters of unexpected output during activation. " – Vainius Mykolaitis Aug 20 '17 at 09:41
Could be an issue with something in your full code. See: https://stackoverflow.com/questions/4074477/x-characters-generated-by-wordpress-plugin-during-activation – Lawrence Cherone Aug 20 '17 at 09:43
I rechecked the code - everything seems to be in place... Maybe there are other ways of displaying HTML content (with interactive styling) with php? – Vainius Mykolaitis Aug 20 '17 at 11:11

score 0 · Answer 2 · answered Aug 21 '17 at 09:01

It's because you are trying to return a whole HTML document inside a shortcode which is itself already inside an HTML document.

For the scripts inside the head you should use the enqueue method and return them when the shortcode is used, then strip out the head/body/html tags from your HTML.

<?php
function show_ico_scripts() {
        wp_register_script("show-ico-scripts", "//link-to-CDN-here", array(), "1.0", false);
    }
    function showIco() {
        wp_enqueue_script( 'show-ico-scripts' );
        ob_start();
    ?>
    <style>
    all the styling is here, and I know, it's not DRY
    </style>
    The content I want to display (it has <script></script> tags, and variables)
    <?php
        return ob_get_clean();
    }
    add_shortcode ('add_ico','showIco');

Wordpress- A plugin that displays HTML content (Database) with a shortcode

2 Answers2