Customizing WordPress embed links preview

WordPress 4.4 introduced us to a new feature “embed links preview”.
The feature works like this:

 

Customizing WordPress embed links preview

The implement is pretty simple, just post any link to WordPress a post / page in a WordPress site, and it will be displayed inside a frame with preview of the text in page.
You should leave a empty line above the link. Like in this image:

customize embed wordpress links preview 1

As you could see in the image, the preview is in default design, and in my template the frame on the bottom “brakes”. This is how the embed link looked before we customized it:
customize embed wordpress links preview 2

Lets shake things up and add style to our embed links:
The size of the “iframe” we could fix with this CSS:

 

.wp-embedded-content {
	width:100% !important;
	min-height:250px !important;
}

 

Now we overridden the iframe height and width inline CSS settings. Be noted that usually you will have to add a rule for mobile devices responsive design, this is only an example.

To add CSS style to the title and text preview, we will hook into the function embed_head that prints the iframe, and will add our own CSS.
We will add this code to functions.php page in out child theme. The code will till wordpress to run our function when when the head of the iframe, that where we want our custom CSS.

I set the “.wp-embed-featured-image img” to “display:none” because i don’t want the post featured image in the link preview.

 

// Add style to embed links
add_action( 'embed_head', 'embed_top_style' );	
function embed_top_style(){ ?>
	<style>
		.wp-embed , .wp-embed-heading , .wp-embed-heading a {
			color:white;
		}
		.wp-embed {
			background-color: black;
		}
		.wp-embed-heading { 
			background-color: black ;
			text-align:center;
		}
		.wp-embed-featured-image img {
			display:none;
		}
	</style>	
<?php }

 

To add a custom footer under the preview, we coould hook into the embed_footer function. This code will till wordpress to run our function that prints our custom footer in the end of the iframe.

 

// Add custom footer after embed links preview
add_action( 'embed_footer', 'embed_custom_footer_line' );	
function embed_custom_footer_line(){ ?>
	<div id="custom-embed-footer">
		<h3>Our custom Footer line!</h3>
	</div>
<?php }

 

To set the footer to look perfect in place we could add this CSS to the the css we added hooking into embed_head before:

 

#custom-embed-footer {
	text-align:center;
	background:#EDE3E1;
	top:-15px;
	position:relative;
	padding:1px;
}

 

We should  increase the height of the iframe a little bit from 250px to 270px because the custom footer.

 

.wp-embedded-content {
	width:100% !important;
	min-height:270px !important;
}

 

This article was examples how to hook into the functions embed_head and embed_footer, but of course you could set the CSS to whatever you need.

 

Any corrections / ideas / feedback are welcomed in comments, Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *