Reordering the featured page elements : title, image, text, button

Updated : works fine with Featured Pages Unlimited v1.4+

The featured pages are composed by 4 blocks ordered as follow by default :

1. Image
2. Title
3. Excerpt (or custom text)
4. Button

With the following snippet you can define a new order for those blocks. Just change the order of the items in the $my_item_order  array in the code below.

In this example, the title is moved before the image.

add_action('wp_footer' , 'set_fp_item_order');
function set_fp_item_order() {
    $my_item_order = array(
        'title',
        'image',
        'text',
        'button',
    );
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            ! function ($) {
                //prevents js conflicts
                "use strict";
                var my_item_order   = [<?php echo '"'.implode('","', $my_item_order).'"' ?>],
                    $Wrapper        = '';
                    _
                if ( 0 != $('.widget-front' , '.marketing' ).length ) {
                    $Wrapper = $('.widget-front' , '.marketing' );
                } else if ( 0 != $('.fpc-widget-front' , '.fpc-marketing' ).length ) {
                    //for FPU users
                    $Wrapper = $('.fpc-widget-front' , '.fpc-marketing' );
                } else {
                    return;
                }

<?php if ( defined( 'CZR_IS_MODERN_STYLE' ) && CZR_IS_MODERN_STYLE ): ?>
                var Selector       = {
                    title: '.fp-title',
                    image: '[class*=-thumb-wrapper]',
                    text: '.fp-excerpt',
                    button: '.fp-button'
                }
<?php else: ?>
                var Selector       = {
                    title: 'h2',
                    image: '.thumb-wrapper',
                    text: 'p',
                    button: 'a.btn, a.fp-button'
                }
<?php endif; ?>
                $Wrapper.each( function() {
                    var o            = [];
                    o['title']   = $(this).find(Selector.title);
                    o['image']   = $(this).find(Selector.image);
                    o['text']    = $(this).find(Selector.text);
                    o['button']  = $(this).find(Selector.button);
                    for (var i = 0; i < my_item_order.length - 1; i++) {
                       o[my_item_order[i]].after(o[my_item_order[i+1]]);
                    };
                });
            }(window.jQuery)
        });
    </script>
    <?php
}