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:
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
There are five files that define the layout of the embeds:
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:
<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 shares your posts within their own WordPress sites, the design will be unique and can match your brand.