How to Embed Pages into WordPress Content

As the title of this tutorial suggests, I am going to show you how to embed pages into WordPress content. But you aren’t limited to pages. You can embed any WordPress content type in a post or page. This includes custom post types that you create yourself, or that are created by a plugin.

Today, I’ll talk about why embedding is a powerful tool, and we’ll go through the steps required to embed pages into WordPress content.

Why Embed a Page in a Page?

If you have content that appears in multiple places on your site, you know that when that content changes, it can be tedious to update every post or page on which it appears. It’s easy to miss a page when you update manually. Then, you run the risk of having conflicting information from one page to another.

But what if you could update the repeating content in one place and automatically update every page where the content appears? That’s the power of embedding.

Just update the page that contains the content and it changes everywhere the text or media appears on your site.

Embedding as a Formatting Tool

Repetitive content isn’t the only good use of embedding. Often, we have elements of a post or page that may require a layout that’s different from the standard WordPress post format. This may be visual presentations such as image galleries or carousels. And sometimes tables might not fit into the standard page markup.

Embedding a custom page type can make your workflow much more efficient.

Embedding is a powerful tool, but it doesn’t have to be complicated. If you’ve ever coded a site manually and used includes for repetitive content, that’s essentially what we’re going to do here. Embedding using WordPress shortcodes or “including” a file in a page will give us the same result.

If you’ve never worked with includes or embedding, don’t worry. By the end of the article, you’ll understand how it works. And if you follow along, you’ll be ready to start embedding right away.

Installing the Insert Pages WordPress Plugin

We’re going to use the “Insert Pages” plugin to do our embedding, so let’s install it.

Log in to your WordPress admin panel.

In the left column navigation mouse over the “Plugins” link and click the “Add New” link.

mouse over the "Plugins" link and click the "Add New" link

In the “Search plugins…” box, enter “Insert Pages.”

search for the WordPress Insert Pages plugin

Once you have located the plugin, click the “Install Now” button.

click to install the WordPress Insert Pages plugin

When the plugin has been installed, click the “Activate” button.

click to activate the WordPress Insert Pages plugin

Using the Insert Pages Plugin

The examples here use the WordPress Classic Editor. If you are using Gutenberg, the Insert Pages functions have to be added to posts manually using the Shortcode block. I’ll show you how that works in a minute.

When writing or editing a post, you’ll see an “Insert Page” icon. Click it to insert a page into your post.

click to insert a page into your post

In the “Insert Page” pop-up window that opens, select a page from the list of pages. Selecting a page will automatically populate the “Slug or ID” field.

Alternately, you can manually enter the slug name or page ID in the “Slug or ID” field.

Click the “Insert Page” button.

click the “Insert Page” button

You can see that Insert Pages adds a shortcode to the post.

Insert Pages adds a shortcode to the post

That code indicates where the inserted page will show up in the post.

By default, only the title of the embedded page is displayed.

the title of the embedded page is displayed

Let’s change that so the content of the embedded page is shown.

Open the post that contains the embedded content in the editor. Select the shortcode that we added. Click the “Insert Page” icon.

click the "Insert Page" icon

Now you can choose which part of the embedded page is shown.

choose which part of the embedded page is shown

We’ll choose “Content,” and then click the “Update” button.

You can see that the shortcode has changed to display=’content’.

the shsortcode has changed to display='content'

After we save the post, you can see that it now displays the page content.

the post now displays the page content

Using the Insert Pages Plugin With the Gutenberg Block Editor

As you may have gathered from the shortcodes in the previous examples, embedding a page in the Gutenberg block editor works the same way it does in the Classic Editor. The only difference is there’s no “Insert Page” icon to bring up the pop-up window.

The shortcode has to be added manually when working with Gutenberg.

To add the contents of our sample page to a post in Gutenberg, we just add the shortcode:

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][insert page=”sample-page” display=”content”][/ht_message][/ht_message]

Note that Gutenberg will detect shortcode and add it to a shortcode block.

add the shortcode

These are the Insert Pages options. You can see that only the “display” value changes.

[ht_message mstyle=”info” title=”” show_icon=”” id=”” class=”” style=”” ][insert page=’sample-page’ display=’title’]
[insert page=’sample-page’ display=’link’]
[insert page=’sample-page’ display=’excerpt’]
[insert page=’sample-page’ display=’excerpt-only’]
[insert page=”sample-page” display=”content”]
[insert page=’sample-page’ display=’post-thumbnail’]
[insert page=’sample-page’ display=’all’][/ht_message]

Embedding Custom Post Types

We talked about the use of custom post types for adding content that requires specific formatting. Custom post types can also be embedded using the “Insert Pages” plugin.

We’ll select the custom post type “FOOTER.”

select the custom post type FOOTER

The “FOOTER” shortcode is inserted.

the FOOTER shortcode is inserted

And the custom post type footer is displayed in the post.

footer is displayed in the post

If You Embed It, They Will Come

There are a lot of uses for embedding, and we’ve only scratched the surface here. Using custom post types, you can get into some elaborate and complicated embedding scenarios. But the simple uses are great too. Getting accustomed to the idea of embedding content into a post can open the door to a lot of new ideas.

Have you ever used other manual methods to embed content in a page? Can you think of a custom post type that could be a useful embedding tool?

 

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.