Media library management in Wordpress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when you upload an image larger than the max upload size?

In WordPress, if you try to upload an image file larger than the maximum upload size set in the server or WordPress settings, what will be the result?

A WordPress compresses the image to reduce size and then uploads.

B The upload fails with an error message about file size limit.

C The image uploads but is automatically resized to fit the limit.

D The image uploads successfully without any warning.

💡 Hint

Think about server restrictions and WordPress upload handling.

WordPress and the server enforce a maximum upload size. If the file is too large, the upload is rejected with an error message.

❓ state_output

intermediate

What is the output of this WordPress media query?

Given this code snippet querying media attachments, what will be the count of items returned?

 $args = [
  'post_type' => 'attachment',
  'post_mime_type' => 'image/jpeg',
  'posts_per_page' => -1
];
$query = new WP_Query($args);
echo $query->found_posts;

Wordpress

$args = [
  'post_type' => 'attachment',
  'post_mime_type' => 'image/jpeg',
  'posts_per_page' => -1
];
$query = new WP_Query($args);
echo $query->found_posts;

A The number of JPEG images in the media library.

B The total number of all media items regardless of type.

C Zero, because 'attachment' is not a valid post type.

D The number of posts, not media items.

💡 Hint

Check the post_type and post_mime_type filters.

The query filters attachments by MIME type 'image/jpeg', so it returns only JPEG images count.

📝 Syntax

advanced

Which option correctly registers a custom image size in WordPress?

You want to add a new image size called 'custom-thumb' with 300x200 pixels, cropped. Which code snippet correctly does this?

A add_image_size('custom-thumb', 300, 200);

B add_image_size('custom-thumb', 300, 200, true);

C add_image_size('custom-thumb', array(300, 200), true);

D add_image_size('custom-thumb', 300, 200, 'crop');

💡 Hint

Check the parameters of add_image_size function.

The function add_image_size takes name, width, height, and crop boolean or 'crop' string. 'true' or 'crop' enables cropping.

🔧 Debug

advanced

Why does this media upload code fail to attach metadata?

This code uploads an image and tries to generate metadata but the metadata is missing. Why?

$attach_id = media_handle_upload('file', 0);
wp_generate_attachment_metadata($attach_id, get_attached_file($attach_id));

Wordpress

$attach_id = media_handle_upload('file', 0);
wp_generate_attachment_metadata($attach_id, get_attached_file($attach_id));

A wp_generate_attachment_metadata returns metadata but it is not saved back to the database.

B media_handle_upload does not upload the file correctly.

C The code is missing a call to wp_update_attachment_metadata to save metadata.

D get_attached_file returns false because attachment ID is invalid.

💡 Hint

Generating metadata alone does not save it.

wp_generate_attachment_metadata creates metadata array but you must call wp_update_attachment_metadata to save it.

🧠 Conceptual

expert

What is the main benefit of using the WordPress REST API for media library management?

Why would a developer prefer to manage media library items using the WordPress REST API instead of traditional PHP functions?

A It allows remote applications and JavaScript frontends to interact with media items asynchronously.

B It automatically compresses all media files on upload.

C It disables user permissions for media uploads to improve security.

D It replaces the need for any PHP code in WordPress.

💡 Hint

Think about modern web app architectures and asynchronous data handling.

The REST API enables external apps and JavaScript to manage media without page reloads, supporting modern interfaces.

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