Treehouse: 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=”

    • Nizam Kazi
      Permalink to comment#

      Hey Kris,

      Thanks, “pagename=” this is what I was searching for :)

    • ben
      Permalink to comment#

      keep in mind that page names change, but the id number is static, so is a touch safer . . .

  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. Marc

    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. Tom J Nowell
    Permalink to comment#

    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. Ivana Setiawan
    Permalink to comment#

    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. William Courtney
    Permalink to comment#

    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. Alex Johnson
    Permalink to comment#

    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. ozgur coruhlu
    Permalink to comment#

    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. Gourish Yaji
    Permalink to comment#

    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. Admission Times
    Permalink to comment#

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

  23. Nizam Kazi
    Permalink to comment#

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

  24. Laine
    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. erwin prasetyo
    Permalink to comment#

    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();
    

  30. krrish
    Permalink to comment#

    how can I convert this into an shortcode? Eg:- [my_content]

    • Aalaap Ghag

      This should work when added to your functions.php:

      function includepage_func( $atts ) {
          $atts = shortcode_atts( array(
              'id' => -1,
              'name' => '?'
          ), $atts, 'includepage' );
      
          if ($atts['id'] != -1) {
              $wp_query_parameters = "page_id=" . $atts['id'];
          } else {
              $wp_query_parameters = "pagename=" . $atts['name'];
          }
      
          $recent = new WP_Query($wp_query_parameters);
      
          while($recent->have_posts()) {
              $recent->the_post();
              $pagecontent = "<h3>" . the_title('', '', FALSE) . "</h3>" . get_the_content();
          }
      }
      
      add_shortcode( 'includepage', 'includepage_func' );
      

      In your page/post, use it like this:

      [includepage id=59]

      OR

      [includepage name=about]

  31. Gonzalo

    Gracias!

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```