How to create a content only page template?

Sometimes you may want the user to focus only on content OR you want to embed your site page (for example event calendar) to any third party site. In this case you would need to create a page on your WordPress site that does not show header, footer and the sidebar. This can easily be done by creating a custom page template. Lets see how to do that:

Step 1: Create a template file in your active theme folder. In this example I am using WordPress default Twentytwenty theme and have created a tmplate-content-only.php file within that. You can refer below code as an example

<?php
/**
 * Template Name: Content only template
 * Template Post Type: post, page
 *
 * @package WordPress
 * @subpackage Twenty_Twenty
 * @since 1.0
 */
?>

<html <?php language_attributes(); ?> class="no-js">
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <?php wp_head(); ?>
    </head>
        <body>

            <main id="site-content" role="main">
                <article <?php post_class(); ?> id="post-<?php the_ID(); ?>">
                    <div class="post-inner">
                        <div class="entry-content">
                            <?php
                                while ( have_posts() ) : the_post();   
                                    the_content();
                                endwhile;
                            ?>
                        </div>
                    </div>
                </article>
            </main><!-- #site-content -->

        <?php wp_footer(); ?>
        </body>
</html>

Step 2: Create a page from WordPress dashboard and assign our new “Content only template” to that page. For example purpose I have added an image gallery within the content.

Step 3: Visit the page on front end and see. If you want you can copy the URL and use that in the iframe as source so that you can embed that iframe in any third party site or an HTML site.

Here is sample iframe code which can be used to embed the page in third party sites.

<iframe src="https://example.com/content-only/"></iframe>

If you are novice, and don’t know how to code OR need help in doing above, please feel free to contact. I will be happy to help.

Leave a Reply