Customize the Design of Your Embeddable WordPress Posts

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=true

And here’s an example of the preview URL in action:

Embeddable Posts in WordPress 4.5

…and the image below shows how your post embed will look:

Embeddable Posts in WordPress 4.5


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/
Embeddable Posts in WordPress 4.5


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.

Embeddable Posts in WordPress 4.5

Now, I preview the embed again to confirm that my changes are working:

Embeddable Posts in WordPress 4.5


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:

Embeddable Posts in WordPress 4.5

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.

Author

  • Valentin Garcia

    Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Article Rating
Subscribe
Notify of
16 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Sundsvall62
Sundsvall62
6 years ago

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

htmgarcia
6 years ago
Reply to  Sundsvall62

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

Japon Secreto
Japon Secreto
6 years ago

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

Alex Smirnov
Alex Smirnov
6 years ago
Reply to  Japon Secreto

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

Japon Secreto
Japon Secreto
6 years ago
Reply to  Alex Smirnov

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

Alex Smirnov
Alex Smirnov
6 years ago
Reply to  Japon Secreto

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.

Japon Secreto
Japon Secreto
6 years ago
Reply to  Alex Smirnov

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

Mark
Mark
6 years ago

I want to remove the WordPress logo how can i do that?

Trav
Trav
5 years ago

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?

ilhan emecen
ilhan emecen
5 years ago

I want to edit it as in the picture, but I have no code and I can’t find any resources.
Could you help?

Andrew
Andrew
4 years ago

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

Mas pingkow
Mas pingkow
4 years ago

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]

David Brewer
David Brewer
4 years ago

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

Dorothea
Dorothea
3 years ago
Reply to  David Brewer

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.

Joaquín
Joaquín
3 years ago

Thanks for this article, Valentín. It has been much helpful!

gonzalo
gonzalo
3 years ago

y como puedo modificar el archivo wp-includes/embed.php, para cambiar el iframe que genera wp sin tocar el código fuente?
gracias

16
0
Would love your thoughts, please comment.x
()
x