WordPress PHP Class Based / OOP Coding: Part 3 – Theme Output

Project reminder: Our hypothetical client wishes us to create a image modal / lightbox that displays an image uploaded via the WordPress media manager and display custom meta along with that image.  In Part 1 we created a simple function to output a <img> tag with the media’s id as a data attribute and in Part 2 we registered our custom post type and taxonomy.

Last week we took a look at registering a CPT in a Class and we’ll make a minor change to that code.  We are going to register the ‘image_location’ taxonomy to the Post Type ‘attachment’.  This will move the taxonomy to the media edit screen (i.e. Media > Library > Click on an image) which we will later use to grab image specific meta data. We will do this by changing (in class-2014-post-type-modal.php):

to:

Ok, now to start building the theme output, again we start by creating a new php file in out ‘inc’ directory called ‘class-2014-media-output.php’. This file will simply be a get_posts function and an include as such:

Note: notice the use of the ‘fields’ => ‘ids’ argument here, this results in either get_posts or WP_Query in returning only the post ID’s. Also my decision to use get_posts here rather than wp_query is justified by, 1: I found it to be marginally faster ( XMAPP on a 13in MacBook Pro), and 2: we are never going to actually drop into a WordPress loop making only the post IDs necessary.

Importantly you will notice that I am using a include here and the ‘locate_template’ function rather than a more standard get_template_part() function.  This is because using an include here allows us to use the $media_posts variable inside of the templates/media-output.php file.  There are certainly other ways to send variables to a template part but for this tutorial this method works fine.

So now we can create a ‘templates’ directory in the root of our theme, and inside of that create a ‘media-output.php’ file.  If you remember back to Part 1 of these articles we created a My_2014_Img class that has an output function.  This function simply returns a <img> tag with the media object’s ID as a data attribute (for later ajax use), here is the Class again:

With this in place we can move on to the actual output which we are building in templates/media-output.php.  Because we have access to the $media_posts array which is created in class-2014-media-output.php via our get_posts call we can do the following to actually output some thumbnails:

At this point we can actually add our output to a theme file with:

Ok, so we now have a bunch of image thumbnails being output with their ID’s as a data attribute.  You will want to write your javascript according to your DOM structure, for this article I decided to change the output() function in class-2014-img.php to:

Adding the class of ‘media-js-target’ here allows us to target the image when it is clicked on.  To make sure everything is working go ahead and create and register a javascript file in your functions.php, something like this should work:

Here we want to make sure that we include jQuery as a dependency as well as making sure we are loading this in the footer via the ‘true’ last argument.

Inside of our new javascript file we can add this to make sure everything is connected correctly:

If you do not see the image’s id logged in your console when clicking on it stop here and make sure you are targeting your images in the JS correctly.

Now that your JS is all hooked up its time to get it ready for an ajax call which will create our modal and populate it with time full image that we clicked on.  I am not going to get into ajax in WordPress too much here, a googling of ‘ajax in WordPress’ should get you caught up should you need it.

The next thing we need to do is localized a ajax url for our javascript and this will do the trick in functions.php:

Note that the first arguments (script slug) in both functions are the same, this is important to allow our media-modal-js.js files be able to just WordPress’ admin-ajax.php url.

Moving back to media-modal-js.js, let’s start writing our ajax call we will change all of media-modal-js.js to:

Here ‘url: ajaxurl.ajaxurl’ is available via our wp_localize_script function, ‘type: ‘GET” is the type of call we are making and ‘data’ is the stuff we are sending during our ajax call.  Inside of ‘data’ you seeing ‘action: media_modal_ajax’ which is a php function we will create shortly and ‘ ‘img_id’: img_id’ ‘ is the js variable we set when we clicked on the image (the image’s id from the data-img_id), this will be sent via our GET request which we will then grab with PHP in our media_modal_ajax function below.

First create and require_once a new PHP file inside of our ‘inc’ directory and call this file ‘class-2014-media-modal-ajax.php’.  This will be where the ajax magic happens with this:

Note the 2 add_actions as this is where some people get confused, heres the short answer… the first is for logged in users and the second is for non-logged in users (i.e. no privileges or no_priv). The other important thing to note here is that our function name is the same in all places, ‘media_modal_ajax’ is our function and ‘wp_wp_ajax_media_modal_ajax’ is our action.  This is because WordPress recognizes this and thus waits for the php / ajax call to happen, which then fires our function.

Clearly we cannot just console.log our ajax response so lets change media-modal-js.js to:

We are now prepending our ajax response to the body tag and need to update our class-2014-media-modal-ajax.php file to:

Note: this is a php / ajax tutorial so I am just using some inline styles here to get everything working in the TwentyFourteen Theme,

Leave a Reply

Your email address will not be published. Required fields are marked *