How do I show content from a plugin using the template the site is currently working with?

Question

I am trying to extend the first serious plugin that I am building. I'd like to be able to use it with different sites/templates.

At the moment I designed a custom page that I included with the plugin that outputs a bunch of data that is edited through the plugin. I built 1.0 of this so it looked fine with the theme that was being used while I built the template.

But when I tried using a new theme everything got messed up (I kind of expected that to be honest).

To help answer the question my approach has been the following with this page:

<?php
/*
Template Name: Football Game (Single)
*/
get_header(); ?>

<div id="main">
    <div id="post-area">
     Custom content here 
    </div><!--post-area-->
</div><!--main -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

This looks fine on the original template I was developing for, but on the new template (Twenty Fourteen), the nav on the left covers it up, and the nav has no menu items anymore.

I am simply looking for a technique/approach/methodology to make plugin content display nicely in a variety of templates.

Answer 1

It's probably messed up cause the CSS styles doesn't conform to the other theme's styles.

As far as I understand your question, I would suggest to send the data in a custom shortcode and post that to the page's content editor field. You can load a custom style for the output with the plugin.

Hope that helps.