{"id":1303,"date":"2025-05-16T13:00:49","date_gmt":"2025-05-16T13:00:49","guid":{"rendered":"http:\/\/www.diveintoaccessibility.com\/?p=1303"},"modified":"2025-05-19T16:23:40","modified_gmt":"2025-05-19T16:23:40","slug":"5-ways-to-customize-your-wordpress-post-embeds","status":"publish","type":"post","link":"http:\/\/www.diveintoaccessibility.com\/index.php\/2025\/05\/16\/5-ways-to-customize-your-wordpress-post-embeds\/","title":{"rendered":"5 Ways to Customize Your WordPress Post Embeds"},"content":{"rendered":"

WordPress introduced post embeds in version 4.4, allowing you to easily share and display WordPress posts from one site to another. When you paste a link to a WordPress post, it automatically appears as a styled preview with the title, excerpt, and featured image.<\/p>\n

While this feature makes sharing content simple, the default look might not always match your website\u2019s style or layout, as we can see below.<\/p>\n

\"Default
Default WordPress post embeds look<\/figcaption><\/figure>\n

Fortunately, WordPress provides several ways to customize these embeds to better fit your design. In this article, we\u2019ll explore different ways to tweak and personalize WordPress post embeds, so they blend seamlessly with your site.<\/p>\n

\n

1. Customizing the Styles<\/h2>\n

You can easily change the embed\u2019s appearance to better match your website\u2019s theme by adding a custom CSS file with the enqueue_embed_scripts<\/a><\/code> hook, which ensures it\u2019s loaded when the embed is displayed. You can add it in your theme\u2019s functions.php<\/code> file, for example:<\/p>\n

\r\nadd_action( 'enqueue_embed_scripts', function () {\r\n    wp_enqueue_style(\r\n        'my-theme-embed',\r\n        get_theme_file_uri( 'embed.css' ),\r\n        ['wp-embed-template']\r\n    );\r\n} );\r\n<\/pre>\n
This function tells WordPress to load your custom embed.css<\/code> file when rendering an embedded post. Now, you can define your own styles in css\/embed.css<\/code> to modify the look of the embed. For example, you can adjust the typography, colors, or layout with CSS like this:<\/p>\n
\r\n.wp-embed {\r\n    background-color: #f9f9f9;\r\n    border: 1px solid #eee;\r\n    border-radius: 8px;\r\n}\r\n\r\n.wp-embed-featured-image img {\r\n    border-radius: 5px;\r\n}\r\n<\/pre>\n
With these changes, your WordPress post embeds will have a unique style that aligns with your site\u2019s design, as shown below:<\/p>\n
 \"Custom <\/figure>\n
\n
2. Customizing the Image<\/h2>\n
By default, WordPress post embeds use a predefined image size for the featured image. However, you can customize this to better match your design by specifying a different image size.<\/p>\n
For example, if you want the embed image to be a perfect square but don\u2019t have a square image size set up yet, you can define one using the following code in your theme\u2019s functions.php<\/code> file. This code will create a new image size called embed-square<\/code>, which crops images precisely to 300\u00d7300<\/strong> pixels.<\/p>\n
\r\nadd_action( 'after_setup_theme', function () {\r\n    add_image_size( 'embed-square', 300, 300, true );\r\n} );\r\n<\/pre>\n
Then, use the embed_thumbnail_image_size<\/a><\/code> hook<\/p>\n
\r\nadd_filter( 'embed_thumbnail_image_size', function () {\r\n    return 'embed-square';\r\n} );\r\n<\/pre>\n
If you\u2019ve already uploaded images before adding this code, WordPress won\u2019t automatically generate the new embed-square<\/code> size for them. To fix this, you can use the Regenerate Thumbnails<\/a> plugin. This ensures that all your older featured images are available in the new size and display correctly in post embeds.<\/p>\n
Now, your WordPress post embeds will now use the embed-square<\/code> image size, as shown below:<\/p>\n
 \"WordPress <\/figure>\n
\n
3. Customizing the Excerpt<\/h2>\n
The post embeds also display an excerpt of the post content. However, the default length may not always fit your design or readability preferences. Fortunately, you can control how much text is shown by adjusting the excerpt length by using the excerpt_length<\/a><\/code><\/p>\n
For example, if you want to shorten the excerpt to 18<\/strong> words specifically for embeds, you can use the following code in your theme\u2019s functions.php<\/code> file:<\/p>\n
\r\nadd_filter( 'excerpt_length', function ($length) {\r\n    return is_embed() ? 18 : $length;\r\n} );\r\n<\/pre>\n
This code checks if the content is being displayed in an embed and, if so, limits the excerpt to 18 words. Otherwise, it keeps the default excerpt length, as shown below.<\/p>\n
 \"WordPress <\/figure>\n
Experiment with different word counts to find the right balance in your content.<\/p>\n
\n
4. Adding Custom Content<\/h2>\n
By default, WordPress post embeds display basic information like the title, excerpt, and featured image. However, you might want to include additional details, such as the post\u2019s updated date, to provide more context.<\/p>\n
To do so, you can use the embed_content<\/a><\/code>. In our case, we can add the following code in the functions.php<\/code> file to display the post\u2019s updated date:<\/p>\n
\r\nadd_action( 'embed_content', function () {\r\n    if ( ! is_single() ) {\r\n        return;\r\n    }\r\n\r\n    $updated_time = get_the_modified_time( 'U' );\r\n    $published_time = get_the_time( 'U' );\r\n\r\n    if ( $updated_time > $published_time ) {\r\n        $time = sprintf(\r\n            '<time datetime=\"%s\">%s<\/time>',\r\n            esc_attr( get_the_modified_date( 'Y-m-d' ) ),\r\n            esc_html( get_the_modified_date() )\r\n        );\r\n\r\n        printf(\r\n            '<p class=\"wp-embed-updated-on\">%s<\/p>',\r\n            sprintf(\r\n                esc_html__( 'Updated on %s', 'devblog' ),\r\n                $time\r\n            )\r\n        );\r\n    }\r\n} );\r\n<\/pre>\n
Now, the post embeds will display the updated date after the content, as shown below:<\/p>\n
 \"WordPress <\/figure>\n
Displaying the updated date is helpful for readers to know if the content has been recently refreshed. This is especially useful for articles with time-sensitive information, tutorials, or news posts that may change over time.<\/p>\n
\n
5. Overriding Embed Templates<\/h2>\n
By default, WordPress uses a single template file called embed.php<\/code> to display embedded content for all post types, including blog posts, pages, and custom post types. If you want to change how embedded content looks across your site, you can create a custom embed.php<\/code> file inside your theme folder.<\/p>\n
Additionally, WordPress lets you customize embeds for specific post types. For example, if you have a custom post type called \u201cproduct\u201d and want its embed to show extra details like price and availability without affecting other embeds you can create an embed-product.php<\/code> file in your theme folder and customize it as needed.<\/p>\n
\r\n<?php get_header( 'embed' ); ?>\r\n<?php $product = wc_get_product( get_the_ID() ) ?>\r\n<div id=\"embed-product-<?php the_ID(); ?>\" <?php post_class(\"wp-embed\") ?>>\r\n    <div class=\"embed-product-image\">\n        <?php the_post_thumbnail( 'embed-square' ); ?>\n    <\/div>\n    <div class=\"embed-product-details\">\n        <header class=\"embed-product-header\">\n            <h3 class=\"embed-product-title\"><?php the_title(); ?><\/h3>\n        <\/header>\n        <div class=\"embed-product-content\">\n            <?php the_excerpt(); ?>\n            <p><strong>Price<\/strong>: <?php echo number_format($product->get_regular_price()); ?><\/p>\n            <p><button>Buy Now<\/button><\/p>\n        <\/div>\n    <\/div>\n<\/div>\n<?php get_footer( 'embed' ); ?>\r\n<\/pre>\n
Now, whenever a product post is embedded, WordPress will use this template instead of the default one.<\/p>\n
 \"Custom <\/figure>\n
\n
Bonus:<\/h2>\n
Disable Post Embed for Specific Post Types<\/h3>\n
While post embeds are a useful feature for sharing content, you might want to disable them for specific posts or post types. For example, you may have private content that you don\u2019t want to be embedded on other sites.<\/p>\n
To disable post embeds for a specific post, you can use the embed_oembed_html<\/a><\/code> filter to return an empty string.<\/p>\n
Here\u2019s an example of how you can disable post embeds for page<\/code> post type.<\/p>\n
\r\nadd_filter( 'embed_oembed_html', function ( $html, $url, $attr, $post_id ) {\r\n    if ( get_post_type( $post_id ) === 'page' ) {\r\n        return '';\r\n    }\r\n\r\n    return $html;\r\n}, 10, 4 );\r\n<\/pre>\n
\n
Wrapping up<\/h2>\n
WordPress post embeds make it easy to share content between websites. In this article, we explored several ways to customize how these embeds look, so they match your site\u2019s design and include extra details for your readers. Now, you can try these techniques to create embeds that look better and make your content more engaging.<\/p>\n
The post 5 Ways to Customize Your WordPress Post Embeds<\/a> appeared first on Hongkiat<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
WordPress introduced post embeds in version 4.4, allowing you to easily share and display WordPress posts from one site to another. When you paste a […]<\/p>\n","protected":false},"author":1,"featured_media":1305,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[9],"tags":[],"_links":{"self":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts\/1303"}],"collection":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/comments?post=1303"}],"version-history":[{"count":3,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts\/1303\/revisions"}],"predecessor-version":[{"id":1312,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/posts\/1303\/revisions\/1312"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/media\/1305"}],"wp:attachment":[{"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/media?parent=1303"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/categories?post=1303"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.diveintoaccessibility.com\/index.php\/wp-json\/wp\/v2\/tags?post=1303"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}