Customize the Design of Your Embeddable WordPress Posts

| WordPress
Customize the Design of Your Embeddable Posts in WordPress 4.5

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:

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


About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.