Media library management in Wordpress - Mini Project: Build & Apply

Media library management

📖 Scenario: You are building a simple WordPress plugin to manage a media library. This plugin will help organize media files by categories and display them on a page.

🎯 Goal: Create a WordPress plugin that registers a custom taxonomy for media categories, assigns categories to media items, and displays media items filtered by category on a page.

📋 What You'll Learn

Register a custom taxonomy called media_category for attachments

Assign media items to categories using the taxonomy

Create a shortcode [media_library] to display media items filtered by a category

Use WordPress functions and hooks properly

💡 Why This Matters

🌍 Real World

Managing and organizing media files in WordPress sites is common for photographers, bloggers, and businesses. Custom taxonomies help categorize media for easier searching and display.

💼 Career

WordPress developers often create plugins or themes that extend media management. Understanding taxonomies, shortcodes, and WP_Query is essential for customizing WordPress sites.

1

Register custom taxonomy for media categories

Write code to register a custom taxonomy called media_category for the attachment post type using the register_taxonomy function inside the init action hook.

Wordpress

<?php
// Register custom taxonomy for media categories
// Your code here

Hint

Use add_action('init', function() { ... }); and inside it call register_taxonomy with 'media_category' and 'attachment'.

2

Add shortcode to display media by category

Create a shortcode media_library using add_shortcode that accepts an attribute category. Store the attribute in a variable called $category.

Wordpress

 'Media Categories',
        'hierarchical' => true,
        'show_ui' => true,
        'show_admin_column' => true,
        'rewrite' => ['slug' => 'media-category'],
    ]);
});

// Add shortcode to display media by category
// Your code here

Hint

Use add_shortcode('media_library', function($atts) { ... }); and inside assign $category = $atts['category'];.

3

Query media items filtered by category

Inside the shortcode callback, write a WP_Query to get attachments filtered by the media_category taxonomy term matching $category. Store the query in a variable called $query.

Wordpress

 'Media Categories',
        'hierarchical' => true,
        'show_ui' => true,
        'show_admin_column' => true,
        'rewrite' => ['slug' => 'media-category'],
    ]);
});

add_shortcode('media_library', function($atts) {
    $atts = shortcode_atts(['category' => ''], $atts, 'media_library');
    $category = $atts['category'];

    // Query media items filtered by category
    // Your code here
});

Hint

Use new WP_Query with post_type set to attachment and a tax_query filtering media_category by $category.

4

Display media items in shortcode output

Complete the shortcode callback by looping through $query->posts and building an HTML string with wp_get_attachment_image for each media item. Return the HTML string at the end.

Wordpress

 'Media Categories',
        'hierarchical' => true,
        'show_ui' => true,
        'show_admin_column' => true,
        'rewrite' => ['slug' => 'media-category'],
    ]);
});

add_shortcode('media_library', function($atts) {
    $atts = shortcode_atts(['category' => ''], $atts, 'media_library');
    $category = $atts['category'];

    $query = new WP_Query([
        'post_type' => 'attachment',
        'tax_query' => [[
            'taxonomy' => 'media_category',
            'field' => 'slug',
            'terms' => $category,
        ]],
        'posts_per_page' => -1,
    ]);

    // Loop through media items and build HTML
    // Your code here
});

Hint

Loop through $query->posts with foreach, append images to a string, and return it.

Practice

1. What is the main purpose of the WordPress Media Library?

easy

A. To organize and manage media files like images and videos

B. To write and edit PHP code

C. To create new WordPress themes

D. To manage user roles and permissions

Solution

1. Step 1: Understand the Media Library role

   The Media Library is designed to store and organize media files such as images, audio, and videos.

2. Step 2: Compare with other options

   Options A, B, and D relate to themes, coding, and user management, which are not the Media Library's purpose.

3. Final Answer:

   To organize and manage media files like images and videos -> Option A

4. Quick Check:

   Media Library = Manage media files [OK]

Hint: Media Library is for media files, not code or users [OK]

Common Mistakes:

• Confusing Media Library with theme or user management
• Thinking it edits code
• Assuming it manages plugins

2. Which WordPress function must be called before using wp.media() in JavaScript to open the media uploader?

easy

A. wp_enqueue_script('jquery')

B. wp_enqueue_media()

C. wp_register_style()

D. wp_localize_script()

Solution

1. Step 1: Identify the function to load media scripts

   The function wp_enqueue_media() loads all necessary scripts and styles for the media uploader.

2. Step 2: Check other options

   Options B, C, and D relate to scripts or styles but do not specifically load media uploader scripts.

3. Final Answer:

   wp_enqueue_media() -> Option B

4. Quick Check:

   Load media scripts = wp_enqueue_media() [OK]

Hint: Always enqueue media scripts with wp_enqueue_media() first [OK]

Common Mistakes:

• Forgetting to enqueue media scripts before using wp.media()
• Using unrelated enqueue functions
• Confusing script and style enqueue functions

3. What will the following JavaScript code do in a WordPress admin page?

const frame = wp.media({ title: 'Select Image', multiple: false });
frame.open();

medium

A. Throw a JavaScript error because wp.media() is undefined

B. Upload a new image automatically without user interaction

C. Close any open media uploader popup

D. Open the WordPress media uploader popup allowing single image selection

Solution

1. Step 1: Understand wp.media() usage

   The code creates a media frame with a title and disables multiple selection, then opens the media uploader popup.

2. Step 2: Analyze each option

   Open the WordPress media uploader popup allowing single image selection matches the behavior. Upload a new image automatically without user interaction is wrong because it does not upload automatically. Close any open media uploader popup is incorrect as it opens, not closes. Throw a JavaScript error because wp.media() is undefined would happen only if scripts are not loaded.

3. Final Answer:

   Open the WordPress media uploader popup allowing single image selection -> Option D

4. Quick Check:

   wp.media() + open() = open media popup [OK]

Hint: wp.media() with open() shows media popup [OK]

Common Mistakes:

• Assuming it uploads files automatically
• Confusing open() with close()
• Not enqueuing media scripts causing errors

4. You wrote this code to open the media uploader but it does not open:

jQuery(document).ready(function($) {
  const frame = wp.media({ title: 'Choose File' });
  frame.open();
});

What is the most likely reason?

medium

A. The media uploader cannot be opened inside document.ready

B. The frame.open() method is incorrect

C. You forgot to call wp_enqueue_media() to load media scripts

D. jQuery is not loaded on the page

Solution

1. Step 1: Check media scripts loading

   The media uploader requires wp_enqueue_media() to load scripts; without it, wp.media is undefined or non-functional.

2. Step 2: Evaluate other options

   frame.open() is correct syntax. jQuery is likely loaded if using $ inside document.ready. The uploader can open inside document.ready.

3. Final Answer:

   You forgot to call wp_enqueue_media() to load media scripts -> Option C

4. Quick Check:

   Missing wp_enqueue_media() = no media popup [OK]

Hint: Always enqueue media scripts before using wp.media() [OK]

Common Mistakes:

• Calling frame.open() incorrectly
• Assuming jQuery absence causes this
• Thinking document.ready blocks media popup

5. You want to let users select multiple images from the media library and then display their URLs in a list. Which code snippet correctly sets up the media frame for multiple selection?

hard

A. const frame = wp.media({ title: 'Select Images', multiple: true });

B. const frame = wp.media({ title: 'Select Images', multiple: 'multiple' });

C. const frame = wp.media({ title: 'Select Images', multiple: false });

D. const frame = wp.media({ title: 'Select Images', multiple: 1 });

Solution

1. Step 1: Understand the 'multiple' option type

   The 'multiple' option expects a boolean true or false to allow multiple selection.

2. Step 2: Check each option's correctness

   const frame = wp.media({ title: 'Select Images', multiple: true }); correctly uses multiple: true. const frame = wp.media({ title: 'Select Images', multiple: 'multiple' }); uses a string which is invalid. const frame = wp.media({ title: 'Select Images', multiple: false }); disables multiple selection. const frame = wp.media({ title: 'Select Images', multiple: 1 }); uses a number which is invalid.

3. Final Answer:

   const frame = wp.media({ title: 'Select Images', multiple: true }); -> Option A

4. Quick Check:

   multiple: true enables multi-select [OK]

Hint: Use boolean true for multiple selection in wp.media() [OK]

Common Mistakes:

• Passing string or number instead of boolean for multiple
• Setting multiple to false when multi-select needed
• Confusing option names or types