Customize the Design of Your Embeddable WordPress Posts
Did you know that every WordPress site can embed posts from every other WordPress site? WordPress sites are oEmbed providers.
Out-of-the-box, your embeddable posts will take on the look and feel of the WordPress core default template. In this blog post, you will learn how to make your embeddables consistent with the look and feel of your own template.
Step #1. How your embed looks by default
As we explained in a previous tutorial, embedding a post from another site is really easy. It only requires the URL.
You can also preview how posts from your WordPress site as embeds. To preview your posts, add this to the end of your URL: ?embed=true. If you don’t have custom permalinks enabled, use &embed=true instead. Here’s how that URL will look:
http://www.mywebsite.any/my-awesome-post/?embed=trueAnd here’s an example of the preview URL in action:
…and the image below shows how your post embed will look:
Step #2. Copy the default embed files into your theme
There are five files that define the layout of the embeds:
- embed.php
- embed-404.php
- embed-content.php
- header-embed.php
- footer-embed.php
Here’s how to customize these files.
- Go to /wp-includes/theme-compat/
- Duplicate the files inside your theme’s folder: /wp-content/themes/your-theme/
Step #3. Customize the embed-content.php file
Edit the file located in wp-content/themes/your-theme/embed-content.php. This file is in charge of the post’s layout.
By default, the post’s image goes first and the title second. I want to switch that order and move the title to the top.
I moved the code that renders the post’s title just after opening the main div.
Now, I preview the embed again to confirm that my changes are working:
Step #4. Add CSS tweaks to the embed-content.php file
Next, I want to add a dashed border. If I make this change, my embed will now look like the image below:
To make that visual change possible, I added some inline CSS around line 13 of embed-content.php:
php}<div <?php post_class( 'wp-embed' ); ?> style="border: 2px dashed #336699;”>Step #5. More customization
In addition to embed-content.php, you can optionally tweak these files as well:
- embed.php
- embed-404.php
- header-embed.php
- footer-embed.php
Change the code according to your needs to generate the look and feel you want. So, when somebody shares your posts within their own WordPress sites, the design will be unique and can match your brand.
Hi, thanks for sharing this.
To move further, how can I replace the css that now sits as inline css in the /wp-includes/embed.php with my own?
I can of course edit the file /wp-includes/embed.php, and replace all inline styles and link to a css-file of my own but those edits will be broken with an update of the file ’embed.php’.
Hi @Sundsvall62,
remember you previously copied those files into your WP theme. This, in order to keep your customizations in your own theme folder. See Step #2, please.
In case you are using a theme that already included those files in its core, is possible in future theme updates you would lose your customizations. For that case, a child theme is a good option to protect your customizations.
Regards
Hi Valentín. Great and useful post! Thank you
I’m trying to customize the look of my embed content following your directions. But since I’m not skilled at all it’s realy hard for me to get darker boxes. How should I do? could you indicate?
Thank you
To make your Embed box border darker, simply replace the #336699; in Valentin sample CSS style “style=”border: 2px dashed #336699;” to your own value. You can select this value from the HTML Color Picker at [url=https://www.w3schools.com/colors/colors_picker.asp]https://www.w3schools.com/c…[/url].
Thank you so much
Sorry but I meant that I want to get a darker background of box content, not the border.
As you know background color default is white.
I’d like to set grey or black.
Thank you and forgive my really bad english
To set a desired background color, simply add the “background-color” property.
You may find what it is and how to use it at [url=https://www.w3schools.com/cssref/pr_background-color.asp]https://www.w3schools.com/c…[/url].
For example, for a yellow background, you would need to set the following to Valentin’s code:
style=”border: 2px dashed #336699; background-color: yellow;”>
Cheers.
Hi Alex.
I did all the directions you said and it was succesful (of course!)
But since some months some of my embed links look trembling.
What is the reason? I think it began to occur when I updated my theme.
Is there any thing I could do to fix it?
Thank you
I want to remove the WordPress logo how can i do that?
am trying to embed a game using an iframe. i want to have a width changing option for my iframe similar to youtube’s option on their video toolbar. I want my iframe to have option buttons to change the iframe – from original half-width of page to – fullwidth and fullscreen. Screenshot of the buttons am talking about- https://ibb.co/hPEGqo any ideas?
I want to edit it as in the picture, but I have no code and I can’t find any resources.
Could you help?
Thanks for this post, it was really helpful as I was troubleshooting an issue on a client’s site — because the embeds previews weren’t actually loading. Turns out that the embed URL requests were returning a 404 response, which I verified by appending /embed/ to the end of the URL in the browser.
I re-saved the Permalink Settings (without making any changes), and they’re working again! Just thought I’d mention this in case anyone else runs into this issue. 🙂
Previously thanks for this post. I have found the file, and now I want to hide the image and hide the text / paragraph. How can I do it?
below is an example that I want. Please help thank you
[url=https://drive.google.com/open?id=1g4c5xUSHDoWiWN6vjDyBMhV0hygMex7d]Check this[/url]
Hi,
Do you know how to change the WordPress roundel that appears when you embed a link in a WordPress article?
I would like to replace it with the logo for my site.
Thanks
David
Thanks for your solutions Valentine –
For replacing the logo of wordpress edit the “functions.php” of your theme and add following code snippet:
add_filter ( ‚embed_site_title_html‘, ‚proax_embed_site_title_html‘);
“;
function proax_embed_site_title_html( $html ) {
return „
}
Replace the path within the source-string after “uploads” with your own uploaded picture.
Thanks for this article, Valentín. It has been much helpful!
y como puedo modificar el archivo wp-includes/embed.php, para cambiar el iframe que genera wp sin tocar el código fuente?
gracias
hi.. I should make sure that the preview image is actually 100% and that it adapts to the various screens… example https://www.publicmusic.it/?status/4-4-1696006079 this peach should be enlarged as much as possible, thanks to this guide I have already put the description under the photo instead of next to it, but now I’m stuck.