Grow your CSS skills. Land your dream job.

Last updated on:

Embed a Page inside a Page

<?php $recent = new WP_Query("page_id=**ID**"); while($recent->have_posts()) : $recent->the_post();?>
       <h3><?php the_title(); ?></h3>
       <?php the_content(); ?>
<?php endwhile; ?>

The above code can be used within the regular page loop. Replace **ID** with the ID of the page you wish to embed.

Comments

  1. Kris
    Permalink to comment#

    instead of “page_id=”

    you could also use “pagename=”

  2. david
    Permalink to comment#

    ok,
    nice and thanks a lot for all this information.it is very very useful for me.i am fan but new in wordpress so i visit a lot your site.just one question.if i want to embed several pages inside a page,how can i do without repeating this same code several times?
    again thanks very cool informations ,actually i ve learned how to create my own theme because of you:)

  3. Cristobal
    Permalink to comment#

    Hi,

    Very good solution, I’ve been looking around for something like this a while and is good to find it in a few lines of code.

    It would be possible to show the content of the new page until the tag?

    thanks for the help.

  4. Cristobal
    Permalink to comment#

    the previous post I’ve fortot to add the “code” inside tags, I was talking about the “Read more” line that you can add to the article.

    Thanks

  5. Ant

    I am thinking to use that to parse one site content into one page (excessive pagination is bad!).

  6. I know this is more about straight WP code/functions but I’m a huge fan of Improved Include Page – http://cl.ly/1X32

  7. Florian

    hmmmm somehow it doesnt work for me… :(

    im using wordpress 3.0 and my code looks correct for me, but even when i insert a post_id manually it won’t display anything… do you have any idea? I saved my code at a pastebin: http://pastebin.com/38GVT56j

    thank you very much…

  8. Florian

    ok, i got it on my own :)
    the problem only was that i used custom post types… so i had to tell the querry that it should enable displaying that specific posttype…


    $recent = new WP_Query(array( 'post_type' => 'seitenelemente', 'page_id' => 157 ));
    </code

  9. This works if your putting it at the very end of the loop, but if you want to continue working on the main loop afterwards, you’ll need to call

    wp_reset_query();

    Also keep in mind if using pagenames etc, it might be a good idea to specify that you only want a single post displaying using 'posts_per_page' => 1

  10. Hi!
    When I use this code:

    have_posts()) : $recent->the_post();?>

    All my recent comments (on the dashboard) – always have the exact page as their “In response to” => I wish I could send you some screenshots.

    So: “This is a comment” in response to “pagesidebar”, which doesn’t make sense and pretty confusing…(because ALL of the comments have the same in-reponse-to result)

    Does anyone here has same problem? HELP please?

  11. I love you…

  12. Carl
    Permalink to comment#

    Hello,

    This is nice. Is there anyway that will also post the image I added in the content?

    THanks
    Carl

  13. Rock on!! Chris Coyier is the Daddy!! Yeahhhh

  14. kimil
    Permalink to comment#

    Cool !!
    Can i use it based on the page template ?

  15. Joe
    Permalink to comment#

    HELP!

    I need to insert a .php page (made in dreamweaver and present on the server) WITHIN a page in WordPress.

    I desire it to show when the page loads.

    I designed it in Dreamweaver as I wanted to have more control over the graphics, rollover buttons, etc.

    I just need to plug it in to a WordPress page. I still need to maintain the other aspects of the WordPress template, however (sidebar, header, etc)

  16. Shrav
    Permalink to comment#

    Hey Chris!

    Thanks!

    I have learnt so many things from you / css-tricks.com over the years. Its incredible. Thanks once again.

    Cheers

  17. Ronan
    Permalink to comment#

    Chris, you sir, are a legend! Thanks for this.

  18. Thanks Chris again for the life saving tip.

  19. Rasha
    Permalink to comment#

    any relpy please on the comments ?????
    Thanks

  20. tim
    Permalink to comment#

    This code worked great when I added one page with it.
    I tried to repeat the code below to display a second and third page and it locked up my browser and confused Google analytics and a Light Social Plugin. I disabled them but I’m still having trouble using this code to display more than one post. Do I need to change each occurrence of recent to recent 1, recent 2 etc. or will each recent replace the last one?

  21. I want to have 3 pages embedded in my home page. One is forum page and other two are recent posts in particular categories. Can this be possible by above page ?

  22. How can i replace the included code of page which is added in post ?

  23. Permalink to comment#

    A big help to me :) earning few bugs because of you :)

  24. Permalink to comment#

    Great, thanks for the help! :)

  25. Cheyne
    Permalink to comment#

    THANK YOOOOOU :)

  26. Russell
    Permalink to comment#

    This is what I’ve been looking for. I’m new to WordPress. Where do I type this code… in the page itself…

    Grateful if someone can help a newbie :-)

  27. yeah.. this works on wordpress 3.6 … thanks^^

  28. Hindujhan
    Permalink to comment#

    Thank you

  29. Scott
    Permalink to comment#

    Thanks for this post! I used a variation of this snippet to create a Page that always displays the single most recent blog post, which my readers can bookmark for quick access to my latest writing. Here’s how I did it…

    1. Add a new Page (the post_type is 'page') and make sure the page slug is latest. The content of the page can be left blank as it is ignored.
    2. Make a copy of your theme’s single.php template file and rename it page-latest.php (in other words, the filename format is page-{slug}.php). This file will go in your theme directory. For this example, I’m starting with the single.php file from the TwentyFourteen theme.

    3. Note that I edited out the “loop” code, while (have_posts()...endwhile, as it is not needed for a single post.

    4. Add the two lines of code before get_header() as shown below. The first line creates a new query object with the latest Post’s data; the second line takes the place of the traditional “loop” code and tells WordPress to use the new query’s post data instead of the original Page’s data.

    5. If you use a custom template for your blog posts, you can change the parameters of get_template_part() accordingly.

    6. Optionally add a “preamble” between <div id="content"> and get_template_part().

    Here is the entire template code:

    <?php
    $latest = new WP_Query( array( 'post_status' => 'publish', 'posts_per_page' => 1, 'post_type' => 'post' ) );
    $latest->the_post();
    
    get_header(); ?>
    
        <div id="primary" class="content-area">
            <div id="content" class="site-content" role="main">
    
                <div id="preamble">
                    <h3>The Latest Post</h3>
                    <small>
                        Note: This page changes every time I post to my blog.
                        To bookmark or share this particular post,
                        <a href="<?php echo esc_url( get_permalink() ); ? rel="nofollow">">click here first</a>.
                    </small>
                    <hr />
                </div>
    
                <?php
                    get_template_part( 'content', get_post_format() );
    
                    // Uncomment this or replace with your theme's nav link function:
                    // twentyfourteen_post_nav();
    
                    if ( comments_open() || get_comments_number() ) {
                        comments_template();
                    }
                ?>
            </div><!-- #content -->
        </div><!-- #primary -->
    
    <?php
    get_sidebar( 'content' );
    get_sidebar();
    get_footer();
    

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".