How do I include a php page with its own css and javascript on a wordpress page?

Question

I created a dynamic table in PHP I want to put on a WordPress page. I can open the PHP locally in my browser and the CSS and JavaScript I use to create the table work.

When I try to include the PHP file in a WordPress page with a short code, the WordPress CSS is used on it and the JavaScript is not even run. What is the best way to implement this? Is it even possible?

You can use conditional statements to run the css in your head and js in your footer, and php code in the single page template and wire that to a new page you create. So make a new page, something like, "My New PHP Page" (crap name but you get the idea) and your conditionals depend on that page's title then the code bits are added. Then include the one php on this new My New PHP Page you created. — Nathaniel Flick, Jul 20 '16 at 17:30
More on includes: http://php.net/manual/en/function.include.php — Nathaniel Flick, Jul 20 '16 at 17:33
Found it, this question has been asked before here: http://stackoverflow.com/questions/2810124/how-to-add-a-php-page-to-wordpress With a pretty great answer, more detailed than mine. — Nathaniel Flick, Jul 20 '16 at 17:36
This creates a new page with the php code on it. What I want is to use an existing page and add the dynamic table to it. The css for the page must be the same, I just want to add a table that has its own css and javascript. — Tweakimp, Jul 20 '16 at 18:12
The new template has everything the default template does, plus your extra code. Unless you use a plugin you need to create another template, or use conditionals, to call the php include and the other code you need; you can't run these in a post, for example. — Nathaniel Flick, Jul 20 '16 at 18:46
Yes, and I dont want to create a new page with the old template. I want to add a table to an existing page that has other content already in it. Maybe im missunderstanding you, but with "page" i mean a page that exists in the "all pages" list. for me, a template is just something you start a new page with. — Tweakimp, Jul 20 '16 at 18:51
You can add whatever you want to a template, but it will always show when that template is in use. I'm providing you a way to do this selectively, but if you don't need it, simply put the code you need where you want it. — Nathaniel Flick, Jul 21 '16 at 09:53

Will · Accepted Answer · 2016-07-20T19:36:32.017

If you need or want to use a shortcode, then that means it can be ran on any page or post at any time and so you should always include the necessary JS and CSS. You include JS and CSS in WordPress using a function that contains wp_enqueue_script() calls, and wp_enqueue_style() calls. The function that includes those calls should hook to wp_enqueue_scripts (this link has good examples), and it should be located in the functions.php file of your WP theme or a file that is included within the functions.php file.

Then the shortcode function itself can just be built out as normal, located inside the functions.php file for your theme or a file that the functions.php file includes. If you're not sure how to do that, here's an example below using output buffering.

add_shortcode('shortcode_name_here', 'shortcode_function_name_here');
function shortcode_function_name_here(){

    // Begin output buffering
    ob_start();

    // Build table example, replace with your code beginning here
    // WP_Query, grab up to 100 blog posts, no paging
    $query_args =  array ( 
        'posts_per_page' => 100, 
        'post_type' => 'post', 
        'no_found_rows' => true,
    );

    $wp_query = new WP_Query( $query_args );

    if( $wp_query->have_posts() ) :

        ?>
        <table>
           <tr>
                <th>Titles</th>
            </tr>
            <?php while( $wp_query->have_posts() ) : the_post(); ?>
                <tr>
                    <td><?php the_title(); ?></td>
                </tr>
            <?php endwhile; ?>
        </table>
        <?php

    // Alternative message if there's no posts       
    else:

        ?>
        <h3>Sorry, but we have nothing for you.</h3>
        <?php

    endif;

    // End build table example, end your custom code here
    // End buffering, save, return
    $output = ob_get_clean();
    return $output;
}

Ivan · Answer 2 · 2016-07-20T17:32:47.707

I don't think you can add HTML/JS/PHP with shortcodes. You can however add PHP to the wordpress files directly in the wp-content directory or by adding your own plugin. The easier way would be to access the Wordpress files via the dasboard : go to your dashboard, click on the Appearance tab on left toolbar and on the Editor tooltip. From there you can modify the template files of your theme and create new PHP files.

How do I include a php page with its own css and javascript on a wordpress page?

2 Answers2