Custom Embeds
Enhanced oEmbed support for music platforms.
Bandcamp Embeds
Location: /inc/core/editor/bandcamp-embeds.php
Automatic embed support for Bandcamp albums and tracks.
Supported URLs
- Albums:
https://{artist}.bandcamp.com/album/{album-slug} - Tracks:
https://{artist}.bandcamp.com/track/{track-slug}
How It Works
- User pastes Bandcamp URL in block editor
- Theme fetches page content via
wp_remote_get() - Extracts Bandcamp metadata from
bc-page-propertiesmeta tag - Generates embedded player iframe
Implementation
function custom_bandcamp_embed_handler($matches, $attr, $url, $rawattr) {
// Fetch Bandcamp page
$response = wp_remote_get($matches[0]);
$body = wp_remote_retrieve_body($response);
// Extract metadata
preg_match('/<meta name="bc-page-properties" content="({.*?})"/i', $body, $meta_matches);
$page_properties = json_decode(html_entity_decode($meta_matches[1]), true);
// Determine type (album or track)
$type = $page_properties['item_type'] === 'a' ? 'album' : 'track';
$id = $page_properties['item_id'];
// Generate embed URL
$embed_url = "https://bandcamp.com/EmbeddedPlayer/{$type}={$id}/size=large/bgcol=ffffff/linkcol=0687f5/artwork=small/transparent=true/";
// Return iframe
return '<iframe style="border: 0; width: 400px; height: 350px;" src="' . esc_url($embed_url) . '" seamless>...</iframe>';
}
Registration
wp_embed_register_handler(
'bandcamp_album',
'#https?://([a-zA-Z0-9-]+).bandcamp.com/album/([a-zA-Z0-9-]+)#i',
'custom_bandcamp_embed_handler'
);
wp_embed_register_handler(
'bandcamp_track',
'#https?://([a-zA-Z0-9-]+).bandcamp.com/track/([a-zA-Z0-9-]+)#i',
'custom_bandcamp_embed_handler'
);
Filter Hook
apply_filters( 'custom_bandcamp_embed', $embed_code, $matches, $attr, $url, $rawattr )
Customize Output:
add_filter( 'custom_bandcamp_embed', function( $embed_code, $matches ) {
// Modify embed HTML
return str_replace( 'width: 400px', 'width: 100%', $embed_code );
}, 10, 2 );
Player Configuration
Default embed settings:
- Size: Large
- Background: White (
bgcol=ffffff) - Link color: Blue (
linkcol=0687f5) - Artwork: Small
- Transparent: True
Usage in Editor
Simply paste Bandcamp URL in block editor:
https://artistname.bandcamp.com/album/album-name
Theme automatically converts to embedded player.
Instagram Embeds
Location: /inc/core/editor/instagram-embeds.php
Custom embed handlers for Instagram:
- Post/Reel URLs
- Profile URLs
Usage
Paste an Instagram URL in block editor:
https://www.instagram.com/p/POST_ID/
YouTube Embeds
Support: WordPress core oEmbed (native)
YouTube embeds work automatically without theme modification.
Usage
Paste YouTube URL in block editor:
https://www.youtube.com/watch?v=VIDEO_ID
SoundCloud Embeds
Support: WordPress core oEmbed (native)
SoundCloud embeds work automatically without theme modification.
oEmbed Architecture
Theme extends WordPress’s oEmbed system:
- WordPress Core: Handles standard platforms (YouTube, Twitter, etc.)
- Theme Enhancement: Adds Bandcamp + Instagram handlers
- Block Editor: Automatic preview in Gutenberg
- Filter System: Customize embed output
Custom Embed Development
Add new embed handler:
function my_custom_embed_handler($matches, $attr, $url, $rawattr) {
// Generate embed HTML
return '<iframe src="...">...</iframe>';
}
// Register handler
function register_my_custom_embed() {
wp_embed_register_handler(
'my_custom_embed',
'#https?://example.com/([a-zA-Z0-9-]+)#i',
'my_custom_embed_handler'
);
}
add_action('init', 'register_my_custom_embed');
Embed Styling
Embeds styled via theme CSS:
Standard Embeds:
embed, iframe, object {
max-width: 100%;
}
Block Embeds:
.wp-block-embed {
text-align: center;
}
Instagram:
.instagram-media {
margin: auto !important;
}
Responsive Embeds
Theme includes responsive embed support:
add_theme_support( 'responsive-embeds' );
All embeds automatically resize on mobile devices.
Security
Embed handlers use WordPress escaping:
esc_url()for URLsesc_html()for text contentesc_attr()for attributes
Performance
Bandcamp Embeds:
- Remote HTTP request to fetch metadata
- Parsed on first embed display
- Cached by WordPress (post content)
Other Embeds:
- WordPress oEmbed cache system
- Transient storage (24-hour default)
Block Editor Integration
All custom embeds support:
- Live preview in Gutenberg
- Visual editing
- Alignment controls
- Caption support (where applicable)
Fallback Handling
If embed generation fails:
Bandcamp:
- Returns empty string
- User sees original URL
Best Practice: Always test URLs before publishing.