Best way to allow overwriting images shipped with the plugin?

Question

my plugin ships with certain images that are shown in the frontend when using the extension. The images are good, but in certain circumstances the website owner might want to change it.

What's the best way to do so? I can think of the following two ways, is there a better one? Specifically I would love the idea to allow a short function in PHP living outside my plugin to change it.

The two ideas I have

• ensure proper CSS IDs so that it's easy to replace the image with a custom CSS
• implement the functionality to upload a different logo in the backend and then check if this was done and either show the default one or the uploaded one.

Thanks a lot for any pointers,

Hartwig

Answer 1

Specifically I would love the idea to allow a short function in PHP living outside my plugin to change it.

This is exactly what filters are for. They allow code inside your plugin to call out to anyone else who wants to register a handler function for that filter. You probably have done this with the Wordpress 'system' actions and filters by adding your own code using add_filter, and it's easy to make a new one of those filters that anyone else can call.

E.g., in your plugin perhaps you have this right now:

<img src="path/to/plugin/logo.jpg">

So first you need to make sure whatever you want to let other people filter is in a variable:

<?php
$my_plugin_logo = "path/to/plugin/logo.jpg";

echo "<img src=\"" . $my_plugin_logo ."\">";

Then allow any other code to filter it:

<?php
$my_plugin_logo = "path/to/plugin/logo.jpg";

$filtered_logo = apply_filters('myplugin_filter_logo', $my_plugin_logo);

echo "<img src=\"" . $filtered_logo ."\">";

This calls any code that's registered a function against the new filter you've just made called 'myplugin_filter_logo'.

E.g., your users could put this in their own functions.php or in a new plugin to change the logo:

add_filter('myplugin_filter_logo', 'bobs_new_logo', 10, 1);

function bobs_new_logo($old_logo_path) {
     return "path/to/bobs/logo.gif";
}

Note:

• The filter functions gets your old value, but as in this case doesn't have to use it
• If there are no filter functions registered, the default value that you passed in will be returned