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:
And 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
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:
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/
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:
<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:
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.