Before & After Photos Using the WordPress Shortcode UI

A while ago I came across the excellent plugin for WordPress, comically named Shortcake. Shortcake is a UI for WordPress shortcodes which makes using shortcodes in your content much easier. Recently I worked on a project that required the client to add before and after photos. The solution was shortcodes and thanks to Shortcake it was a whole lot easier. Here is how I went about it.

If you want to learn more about how Shortcake works and what it does I would check our the plugin on WordPress.org as well as heading over to the Github repo. Essentially it means that when dealing with adding shortcodes a user never needs to actually type out code in the editor, they are presented with a more intuitive UI in the add media popup.

First of all I registered my shortcode in the normal way that I would do with any other shortcode, using the add_shortcode hook built into WordPress core.

https://gist.github.com/wpmark/10b8587bb90b8c06b525

The above code adds a shortcode with two attributes. These are the before image and the after image and it expects and attachment ID for each. Therefore without using the Shortcode UI plugin we could now add a shortcode to our content like so:

[before_after_image before_image="100" after_image="101"]

On the front end of the site this would output the two images one above the other. I then needed some styles and some jQuery in order to make the before image show first, and the after image only show when a toggle button was clicked. The following jQuery handled the toggling of before and after images:

https://gist.github.com/wpmark/b2387235091a0cd1a399

Perfect, this now outputs the following on the front end (there are some styles needed here of course!).

Front-end output of a before and after image
Front-end output of a before and after image

The problem of course without using the Shortcode UI plugin is that the user has to know the attachment ID and also type the shortcode into the editor. Well that is what the Shortcode UI plugin handles for you.

In order to get this working make sure you have the Shortcode UI plugin active and then you need to register your shortcode with the Shortcode UI plugin. In the case of this shortcode it was done with the following code:

https://gist.github.com/wpmark/06937f9baca8d80a1add

Just those few lines of code allow us to create a better UI for adding the shortcode. In order to add a before after image, we can now click on the Add Media button, and choose Insert Post Element from the list on the left. On the screen are now all the shortcodes that registered shown with their chosen Dashicon. Clicking that displays a simple UI showing the fields you registered for adding the shortcode.

Adding a Before and After Using the Shortcode UI Plugin
Adding a Before and After Using the Shortcode UI Plugin

As you can see the above interface is much much better than typing out a shortcode in the editor! Not only that, but once you click insert element, the user never even sees the shortcode (as long as they stay in the visual editor) as the plugin handles the TinyMCE view too! You will need some styling in your editor-style.css file.

So there you have it a before and after image shortcode – super charged with a Shortcode UI! I believe that you can also register the javascript to work in the TinyMCE window as well so that it would act the same in there as it does on the front end. This is something I am still investigating.

Using Nivo Slider with WordPress Custom Post Types

I have been using the Nivo Slider for a while on a number of sites, mainly using a function to grab all the images from a particular WordPress post or page and then showing these in the Nivo Slider. Then I found out that it could take HTML for the captions and therefore wanted to use this for a “Featured Content” slider on a website. The featured content post would be a WordPress custom post type. Here is how I did it.

The first stage is to install the Nivo Slider onto your WordPress theme following the excellent and simple to follow instructions provided by the author at dev7studios.com. Once this has been completed and you are happy that the Nivo Slider works correctly then we can start with the fun stuff, by making it show information from our custom post type. In this example I named by custom post type ‘rs_featured’. You should always prefix your custom post types.

In order to display the images in the slider I wanted to make use of the WordPress featured image function which using the_post_thumbnail() in your themes template files – in my case header.php. The first step is to set up a new WP_Query in order to provide us with a custom loop to query posts from our rs_featured custom post type. To do this I used the following code:

<?php
$pj_slider = new WP_Query('post_type=rs_featured&showposts=4'); while($pj_slider->have_posts()) : $pj_slider->the_post();

    // we will do stuff in here later

endwhile;
?>

What this does is that it queries the latest 4 posts from our custom post type. Now we have to decide what we are going to show for each of the posts that are returned and then add this code inside the above loop. With the Nivo Slider instead of using the images title as the caption text you have the options of using HTML. To do this you need to set the title attribute of the image to a unique CSS ID for each of the posts. To do this we will use the posts ID as this is always unique. Therefore I set up the following variable to store the CSS ID that I wanted to attach to the title.

<?php $pj_slider_caption = '#slider-caption-'.get_the_ID(); ?>

We now have a the unique ID setup. Therefore we can go back our code above and add the image from the posts featured image so that this shows for each of the posts in our custom post type. The code for the loop should now look like this:

<?php $pj_slider = new WP_Query('post_type=rs_featured&showposts=4'); while($pj_slider->have_posts()) : $pj_slider->the_post(); ?>

<?php $pj_slider_caption = '#slider-caption-'.get_the_ID(); ?>

<?php if(has_post_thumbnail() ) { ?>
<?php the_post_thumbnail('slider', array('title' => ''.$pj_slider_caption.'')); ?>
<?php } ?>

<?php endwhile; ?>

We pass the new caption ID to the title attribute of the featured image inside the_post_thumbnail() function as an array. The next stage is to set up a DIV that uses the same ID we created above (#slider-caption-theid) as well as the class nivo-html-caption. As we need one of these divs for each of the posts in the loop, so we need a secondary loop, which is similar to the first. The code for this, to be placed underneath the first loop which shows the images is as follows:

<?php $pj_slider_caption = new WP_Query(‘post_type=rs_featured&showposts=4’); while($pj_slider_caption->have_posts()) : $pj_slider_caption->the_post(); ?>

” class=”nivo-html-caption”>“>Read more about this feature »

<!– // nivo-html-caption –>

<?php endwhile; ?>

We are using the posts excerpt as the captions content as well as the post title above the content. Now all you need is to use CSS in order to position and style the caption area as required. This has provided a really useful piece of code and I will no doubt be using it on a few more sites to come. Thanks to Dev 7 Studios for a great jQuery slider.