WordPress Multiple Image Inputs

By: on May 15, 2017 Categories: Development

Share on Facebook Share Share on Twitter Share Share on Linkedin Share

In a previous post I was showing a way to add repeating image inputs to a wordpress post or page. Now let’s do something more simple.

Let’s say I only need to add a few separate image inputs to a custom template used for my homepage. But I want the code to be easily extensible, so I can add any number of images to this template, and maybe apply the same code to other templates.  Here’s the simplest method I found which also allows perfect extensibility.

First step is to add a couple of image inputs to my homepage’s edit screen in wp-admin. Add this code to functions.php :

If we take a look in wp-admin it looks pretty neat:

Capture

Before it works we’ll need to add a bit of javascript. But first let’s add this final piece of code to functions.php, so the ‘saving’ part is handled:

Right, so the magic is done by a single javascript function, which hooks into wordpress’ mediauploader script. Add this code to a new file meta-box-image.js :

Final step is to load this script into our wp-admin. Add this code to functions.php :

 

Now that we have all pieces in place, let’s take a minute to notice how extensible this code is. So we are using this input:

And notice the jquery  .each  loop:

So you can add as many featured_imageX fields as you like, just increment the X number. The code also saves the image ID ( featured_image_id1 ) so you can use  wp_get_attachment_image  in your template files.

Share This

Share on Facebook Share Share on Twitter Share Share on Linkedin Share
Add Comment

Your Comment

Your Toughts

Subscribe to Our Newsletter