Media Management in WordPress Themes

Handling Images

Uploading & Metadata


// Get attachment metadata

$meta = wp_get_attachment_metadata( $attachment_id );

  

// Access width and height

$width = $meta['width'];

$height = $meta['height'];

  • WordPress stores media under wp-content/uploads/year/month/.

  • Generates multiple sizes automatically (thumbnail, medium, large).

  • Metadata stored in wp_postmeta for efficient retrieval.

Featured Images


// Enable support in functions.php

add_theme_support( 'post-thumbnails' );

  

// Display a specific size

if ( has_post_thumbnail() ) {

the_post_thumbnail( 'medium' );

}

  

// Get URL

$url = get_the_post_thumbnail_url( get_the_ID(), 'large' );

Custom Image Sizes


add_image_size( 'banner-image', 1920, 500, true );

the_post_thumbnail( 'banner-image' ); // Hard crop ensures exact dimensions

Responsive Images (srcset)


<img src="image-300.jpg"

srcset="image-300.jpg 300w, image-600.jpg 600w"

sizes="(max-width: 600px) 100vw, 600px">
  • WordPress automatically generates srcset and sizes attributes for responsive design.

Multi-language & RTL Support

Right-to-Left Languages (Hebrew, Arabic)


<html <?php language_attributes(); ?>>


body {

direction: rtl;

}

  • is_rtl() checks if current language is RTL.

  • Include rtl.css for custom RTL styling.

Multi-byte Languages (Japanese, Chinese)


<meta charset="<?php bloginfo( 'charset' ); ?>">

  • UTF-8 encoding ensures correct character rendering.

  • Choose appropriate fonts for readability.

Language & SEO Attributes


<html lang="en">

<link rel="alternate" hreflang="fr" href="https://example.com/fr/">
  • lang for page language, hreflang for search engines.

Image Optimization Strategies

  1. Always serve appropriately sized images:

the_post_thumbnail( 'medium' ); // Avoid using 'full' unnecessarily
  1. Compression & Formats:

  • Use tools like TinyPNG, ImageOptim, or WP plugins.

  • Modern formats: WebP, AVIF.

  1. Lazy Loading:

<img src="..." loading="lazy">
  1. Use CDN for faster delivery (Cloudflare, AWS S3, etc.).

Audio & Video Embedding

Audio


echo wp_audio_shortcode(['src' => esc_url($audio_url)]);

Best Practices

  • Use MP3 or AAC, avoid auto-play, provide captions.

Video


echo wp_video_shortcode([

'src' => esc_url($video_url),

'poster' => esc_url($poster_image_url)

]);

Responsive Video CSS


.video-container {

position: relative;

padding-bottom: 56.25%; /* 16:9 ratio */

height: 0;

}

.video-container iframe {

position: absolute;

width: 100%;

height: 100%;

}

Theme-Level Security

Escaping Output


<h2><?php echo esc_html(get_the_title()); ?></h2>

<input type="text" value="<?php echo esc_attr($value); ?>">

<a href="<?php echo esc_url(get_permalink()); ?>">Read</a>

<?php echo wp_kses_post(get_the_content()); ?>
  • esc_html(), esc_attr(), esc_url(), wp_kses_post() prevent XSS and HTML injection.

Sanitizing Input


$name = sanitize_text_field($_POST['name']);

$email = sanitize_email($_POST['email']);

$age = absint($_POST['age']);
  • Always sanitize before saving to the database.

Nonces (CSRF Protection)


// Add nonce field

<?php wp_nonce_field('form_action', 'form_nonce'); ?>

  

// Verify nonce

if (!isset($_POST['form_nonce']) || !wp_verify_nonce($_POST['form_nonce'], 'form_action')) {

return;

}

Validation


if (!is_email($email)) { return; }

$id = isset($_GET['id']) ? absint($_GET['id']) : 0;
  • Ensure all data is in expected format.

Secure Database Queries


$wpdb->query(

$wpdb->prepare(

"SELECT * FROM wp_table WHERE id = %d",

$id

)

);
  • Never concatenate raw input into SQL.

Media Security


<img src="<?php echo esc_url($image_url); ?>" alt="">

  • Validate MIME types on uploads.

  • Avoid exposing sensitive paths.

Capability Checks


if (!current_user_can('edit_posts')) {

return;

}
  • Restrict admin or sensitive actions to authorized users only.

Quick Notes

  • Accessibility: Alt text, captions, transcripts.

  • Performance: Compress images, lazy load, use CDN.

  • Security: Escape output, sanitize input, verify nonces, validate queries.

  • Responsiveness: Use srcset for images, responsive containers for video.

  • Multilingual Support: Proper lang and hreflang, handle RTL and Unicode.