Customize the Design of Your Embeddable WordPress Posts

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

WordPress 4.5 was released this week.

One of its changes involves improvements in the layout for post embeds. When another WordPress site embeds one of your blog posts, you can control the design via your WordPress theme.

In this tutorial, we will show you how to customize your embeddable posts.

With WordPress, you can embed YouTube videos, tweets, Tumblr posts, and a lot of media from several providers. However, since WordPress 4.4 you can embed posts from other WordPress sites.

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

Before WordPress 4.5, the single file that defined the layout for the embeds was embed-template.php.

With WordPress 4.5, that single file has been split into 5 files that can be customised within your theme:

  • embed.php
  • embed-404.php
  • embed-content.php
  • header-embed.php
  • footer-embed.php

Here's how to customize these files.

  • Find the five files here: /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 share 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.