{"id":1835,"date":"2023-06-10T22:51:56","date_gmt":"2023-06-11T02:51:56","guid":{"rendered":"https:\/\/hdplugins.com\/?post_type=documentation&#038;p=1835"},"modified":"2026-01-26T12:47:52","modified_gmt":"2026-01-26T17:47:52","slug":"customize-wordpress-oembeds-for-your-custom-post-types","status":"publish","type":"documentation","link":"https:\/\/hdplugins.com\/learn\/wordpress\/customize-wordpress-oembeds-for-your-custom-post-types\/","title":{"rendered":"Customize WordPress oEmbed for your Custom Post Types"},"content":{"rendered":"\n<p>For the first time, I really needed and <em>wanted<\/em> to use <a rel=\"noreferrer noopener\" href=\"https:\/\/developer.wordpress.org\/reference\/package\/oembed\/\" data-type=\"URL\" data-id=\"https:\/\/developer.wordpress.org\/reference\/package\/oembed\/\" target=\"_blank\">oEmbed<\/a> to have rich embeddable content to better cross-link between parts of my site. For example, I can use an oEmbed to embed the HD Quiz plugin page from WordPress.org<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-plugin-directory wp-block-embed-plugin-directory\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"972E7iWsxX\"><a href=\"https:\/\/wordpress.org\/plugins\/hd-quiz\/\">HD Quiz<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;HD Quiz&#8221; &#8212; Plugin Directory\" src=\"https:\/\/wordpress.org\/plugins\/hd-quiz\/embed\/#?secret=3UZdxv9rbL#?secret=972E7iWsxX\" data-secret=\"972E7iWsxX\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><figcaption class=\"wp-element-caption\">Native embed from WordPress.org looks great!<\/figcaption><\/figure>\n\n\n\n<p>But what If I wanted to embed a documentation article (like this one)  in a support thread, or cross-link documentation between articles? How can I change or modify the embed template?<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Problem<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"529\" height=\"483\" src=\"https:\/\/hdplugins.com\/wp-content\/uploads\/2023\/06\/Screenshot-from-2023-06-10-18-13-41.png\" alt=\"\" class=\"wp-image-1836\" srcset=\"https:\/\/hdplugins.com\/wp-content\/uploads\/2023\/06\/Screenshot-from-2023-06-10-18-13-41.png 529w, https:\/\/hdplugins.com\/wp-content\/uploads\/2023\/06\/Screenshot-from-2023-06-10-18-13-41-300x274.png 300w, https:\/\/hdplugins.com\/wp-content\/uploads\/2023\/06\/Screenshot-from-2023-06-10-18-13-41-500x457.png 500w\" sizes=\"auto, (max-width: 529px) 100vw, 529px\" \/><figcaption class=\"wp-element-caption\">How my Documentation custom post type looked like by default<\/figcaption><\/figure>\n\n\n\n<p>As you can see \u2013 it actually looks pretty great by default. But I see two problems with it. <\/p>\n\n\n\n<p>The first issue is that the page title is just &#8220;HD Quiz&#8221;, which, although accurate (the page is literally called that), doesn&#8217;t signify that this is a documentation article.<\/p>\n\n\n\n<p>The second issue is that if you look at the embed for the WordPress.org plugin page, the embed includes a &#8220;get this plugin&#8221; button link, but our Documentation custom post type only has the title as the link.<\/p>\n\n\n\n<p>So let&#8217;s change that.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The Solution<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Updating Titles<\/h3>\n\n\n\n<p>The first thing I want to do is update the title. Luckily, WordPress already has an easy-to-use filter <code>the_title<\/code> to change the titles of posts. But if I use this filter, it will update <em>all the<\/em> titles, which I don&#8217;t want to do. I only want to update the title inside embedded content, not actual page titles.<\/p>\n\n\n\n<p>What&#8217;s cool is that WordPress has a function <code>is_embed()<\/code> to solve this for us. It works just like <code>is_home()<\/code>, <code>is_search()<\/code>, etc, and we can use it to check <em>where<\/em> we are.<\/p>\n\n\n\n<p>Here is a full function example.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function hdplugins_update_embedded_title($title, $id)\n{\n    $post = get_post($id);\n    if (is_embed() &amp;&amp; $post-&gt;post_type === \"documentation\") {\n        return \"Documentation: \" . $title;\n    }\n    return $title;\n}\nadd_filter('the_title', \"hdplugins_update_embedded_title\", 10, 2);<\/code><\/pre>\n\n\n\n<p>Of course, change <code>documentation<\/code> to whatever the name of your custom post type is.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adding a custom button to the embed<\/h3>\n\n\n\n<p>Now that we&#8217;ve prefixed all documentation titles with &#8220;Documentation&#8221; if embedded,  let&#8217;s also add a button\/link to it.<\/p>\n\n\n\n<p>There&#8217;s actually two ways to do this. Depending on the content type, you can use either the <code>embed_content<\/code> action which allows you to add custom content after the rest of the content, or you can use <code>the_excerpt_embed<\/code> to edit the excerpt of the embed, assuming your embed contains an excerpt. For most cases, <code>the_excerpt_embed<\/code> is probably the better option, but I will use <code>embed_content<\/code> for this example since I don&#8217;t want to modify data, I just want to add something new.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function hdplugins_add_content_to_embeds()\n{\n    if (get_post_type() !== \"documentation\") {\n        return;\n    }\n    $permalink = get_the_permalink();\n    echo '&lt;div class=\"wp-embed-meta\"&gt;&lt;a class=\"button\" href=\"' . $permalink . '\"&gt;Read Documentation&lt;\/a&gt;&lt;\/div&gt;';\n}\nadd_action('embed_content',  \"hdplugins_add_content_to_embeds\");<\/code><\/pre>\n\n\n\n<p>The above example takes whatever the HTML output of the embed was supposed to be, but also echos out a link wrapped in a div. As you can imagine, instead of getting the permalink, you could get some custom metadata or whatever else you want.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Adding custom CSS Styles (or JavaScript)<\/h3>\n\n\n\n<p>If you&#8217;re following along with this tutorial on your own site, you&#8217;re probably pretty happy with how easy it is to update the titles of your embeds, or add custom content to them. But that link is just a plain, boring, link. It doesn&#8217;t look like a button. So let&#8217;s add some custom CSS to make it look better.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\nfunction hdplugins_add_custom_styles_to_embeds()\n{\n    if (get_post_type() !== \"documentation\") {\n        return;\n    }\n?&gt;\n    &lt;style&gt;\n        a.button {\n            background-color: #00749c;\n            color: #fff;\n            border: none;\n            font-size: 1rem;\n            border-radius: 3px;\n            padding: 0.5em 1em;\n            line-height: 1;\n            display: inline-block;\n            cursor: pointer;\n            color: #fff;\n            margin-top: 1em;\n        }\n\n        a.button:hover {\n            color: #fff;\n        }\n    &lt;\/style&gt;\n\n&lt;?php\n}\nadd_action('embed_head', \"hdplugins_add_custom_styles_to_embeds\");\n<\/code><\/pre>\n\n\n\n<p>And bam! Now the link looks much more like a styled native\/integrated button. You can also add JavaScript this way too.<\/p>\n\n\n\n<p>Here is what the final results looks like now<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-hdplugins wp-block-embed-hdplugins\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"QG50z8DQos\"><a href=\"https:\/\/hdplugins.com\/learn\/documentation\/hd-quiz-documentation\/\">HD Quiz Documentation<\/a><\/blockquote><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;HD Quiz Documentation&#8221; &#8212; HDPlugins\" src=\"https:\/\/hdplugins.com\/learn\/documentation\/hd-quiz-documentation\/embed\/#?secret=fTBNdI73fC#?secret=QG50z8DQos\" data-secret=\"QG50z8DQos\" width=\"500\" height=\"282\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to update the oEmbed output of your WordPress Custom Post Types. Modify embed templates, Titles, Add buttons, etc.<\/p>\n","protected":false},"featured_media":1837,"comment_status":"open","ping_status":"closed","template":"","tags":[46,45,44],"documentation_category":[17],"class_list":["post-1835","documentation","type-documentation","status-publish","has-post-thumbnail","hentry","tag-oembed","tag-tutorial","tag-wordpress","documentation_category-wordpress"],"_links":{"self":[{"href":"https:\/\/hdplugins.com\/hdapi\/wp\/v2\/documentation\/1835","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hdplugins.com\/hdapi\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/hdplugins.com\/hdapi\/wp\/v2\/types\/documentation"}],"replies":[{"embeddable":true,"href":"https:\/\/hdplugins.com\/hdapi\/wp\/v2\/comments?post=1835"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/hdplugins.com\/hdapi\/wp\/v2\/media\/1837"}],"wp:attachment":[{"href":"https:\/\/hdplugins.com\/hdapi\/wp\/v2\/media?parent=1835"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hdplugins.com\/hdapi\/wp\/v2\/tags?post=1835"},{"taxonomy":"documentation_category","embeddable":true,"href":"https:\/\/hdplugins.com\/hdapi\/wp\/v2\/documentation_category?post=1835"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}