Wednesday, February 17, 2016

WP Custom Post Type Banner Slider with Settings

function create_post_type() {
    register_post_type( 'banner',
        array(
            'labels' => array(
                'name' => 'Banners',
                'singular_name' => 'Banner',
                'add_new' => 'Add New Banner',
                'add_new_item' => 'Add New Banner',
                'edit_item' => 'Edit Banner',
                'new_item' => 'New Banner',
                'all_items' => 'All Banner',
                'view_item' => 'View Banner',
                'search_items' => 'Search Banner',
                'not_found' => 'No Banners Found',
                'not_found_in_trash' => 'No Banners found in Trash',
                'parent_item_colon' => '',
                'menu_name' => 'Banners',
            ),
            'public' => true,
            'has_archive' => true,
            'supports' => array(
                'title',
                'editor',
                //'custom-fields',
                'post-formats',
                'thumbnail',
                'page-attributes'
            ),
            //'taxonomies' => array( 'post_tag', 'category' ),
            'exclude_from_search' => true,
            'capability_type' => 'post',
            'rewrite' => array( 'slug' => 'banner' ),
        )
    );
}
add_action( 'init', 'create_post_type' );

function add_custom_meta_boxes() { 
    add_meta_box('wp_custom_attachment', 'Banner Image', 'wp_custom_attachment', 'banner', 'normal', 'high'); 
}

function wp_custom_attachment() { 
    wp_nonce_field(plugin_basename(__FILE__), 'wp_custom_attachment_nonce');
    $filearray = get_post_meta( get_the_ID(), 'wp_custom_attachment', true );
    $this_file = ($filearray) ? $filearray['url'] : "";
   
    $html = "<table>";
        $html .= "<tr>";
            $html .= "<td>";
                $html .= ($this_file != "") ? '<p class="description">Replace you banner image.</p>' : '<p class="description">Upload your banner image here.</p>';
                $html .= '<input type="file" id="wp_custom_attachment" name="wp_custom_attachment" value="" size="25">';
            $html .= "</td>";
            $html .= "<td>";
                $html .= ($this_file != "") ? '<div>Preview:<br><img src="'.$this_file.'" style="width:75px;"></div>' : '<div>Preview:<br> Not available</div>';
            $html .= "</td>";
        $html .= "</tr>";
    $html .= "</table>";
   
    echo $html;
}

function save_custom_meta_data($id) {
    if(!empty($_FILES['wp_custom_attachment']['name'])) {
        $supported_types = array(
            'image/gif',
            'image/bmp',
            'image/png',
            'image/jpeg'
        );
        $arr_file_type = wp_check_filetype(basename($_FILES['wp_custom_attachment']['name']));
        $uploaded_type = $arr_file_type['type'];

        if(in_array($uploaded_type, $supported_types)) {
            $upload = wp_upload_bits($_FILES['wp_custom_attachment']['name'], null, file_get_contents($_FILES['wp_custom_attachment']['tmp_name']));
            if(isset($upload['error']) && $upload['error'] != 0) {
                wp_die('There was an error uploading your file. The error is: ' . $upload['error']);
            } else {
                update_post_meta($id, 'wp_custom_attachment', $upload);
            }
        }
        else {
            wp_die("The file type not supported.");
        }
    }
}

function update_edit_form() {
    echo ' enctype="multipart/form-data"';
}

function wp_taler_banner(){
    $args = array(
        'post_type' => "banner",
        'post_status' => 'publish'
    );
    $my_query = new WP_Query($args);
    if($my_query->have_posts()) {
        echo "<div id='slides'>";
        while ($my_query->have_posts()) : $my_query->the_post();
            ?>
                <img src="<?php echo get_post_meta(get_the_ID(), 'wp_custom_attachment', true)["url"];?>">
            <?php
        endwhile;
        echo "</div>";
    }
    wp_reset_query();
    ?>
    <style>
    /* Prevents slides from flashing */
    #slides {
        display:none;
    }
    </style>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/slidesjs/3.0/jquery.slides.min.js"></script>
    <?php
    call_slides_js();
}

function call_slides_js(){
    $width=(get_option('image_width')=='') ? '500' : get_option('image_width');
    $height=(get_option('image_height')=='') ? '200' : get_option('image_height');
    $effect=(get_option('slidesjs_effect') == '') ? "slide" : get_option('slidesjs_effect');
    $hoverpause=(get_option('slidesjs_hoverpause') == '') ? "false" : get_option('slidesjs_hoverpause');
    $pagination=(get_option('slidesjs_pagination') == '') ? "false" : get_option('slidesjs_pagination');
    $navigation=(get_option('slidesjs_navigation') == '') ? "false" : get_option('slidesjs_navigation');
    $playstop=(get_option('slidesjs_playstop') == '') ? "true" : get_option('slidesjs_playstop');
    $interval=(get_option('slidesjs_interval') == '') ? 2000 : get_option('slidesjs_interval');
    $call_back_loaded=get_option('slidesjs_call_back_loaded');
    $call_back_complete=get_option('slidesjs_call_back_complete');
    $call_back_start=get_option('slidesjs_call_back_start');
   
    echo "
        <script style='text/javascript'>
        jQuery(function(){
            jQuery('#slides').slidesjs({
                width: ".$width.",
                height: ".$height.",
                navigation: {
                    active: ".$navigation.",
                    effect: '".$effect."'
                },
                pagination: {
                    active: ".$pagination.",
                    effect: '".$effect."'
                },
                effect: {
                    slide: {
                        speed: 1000
                    },
                    fade: {
                        speed: 1000,
                        crossfade: true
                    }
                },
                play: {
                    active: ".$playstop.", // with play or stop
                    effect: '".$effect."', // slide or fade
                    interval: ".$interval.",
                    auto: true,
                    swap: true,
                    pauseOnHover: ".$hoverpause.",
                    restartDelay: 2500
                },
                callback: {
                        loaded: function (number) {".$call_back_loaded."},
                        start: function (number) {".$call_back_start."},
                        complete: function (number) {".$call_back_complete."}
                }
            });
        });
        </script>
    ";
}


function  wp_taler_banner_settings_page(){
    ?>
    <div class="wrap">
        <h1>Banners Settings</h1>
    </div>
    <form method="post" action="options.php">
    <?php wp_nonce_field('update-options');?>
    <?php
        $slide_effect = (get_option('slidesjs_effect') == 'slide') ? 'selected="selected"' : '';
        $fade_effect = (get_option('slidesjs_effect') == 'fade') ? 'selected="selected"' : '';
        $hoverpause_true = (get_option('slidesjs_hoverpause') == 'true') ? 'selected="selected"' : '';
        $hoverpause_false = (get_option('slidesjs_hoverpause') == 'false') ? 'selected="selected"' : '';
        $activepagination_true = (get_option('slidesjs_pagination') == 'true') ? 'selected="selected"' : '';
        $activepagination_false = (get_option('slidesjs_pagination') == 'false') ? 'selected="selected"' : '';
        $activenavigation_true = (get_option('slidesjs_navigation') == 'true') ? 'selected="selected"' : '';
        $activenavigation_false = (get_option('slidesjs_navigation') == 'false') ? 'selected="selected"' : '';
        $activeplaystop_true = (get_option('slidesjs_playstop') == 'true') ? 'selected="selected"' : '';
        $activeplaystop_false = (get_option('slidesjs_playstop') == 'false') ? 'selected="selected"' : '';
    ?>
    <table class="form-table">
        <tr>
            <th class="row">Width:</th><td><input type="text" name="image_width" class="" value="<?php echo get_option('image_width');?>"/></td>
        </tr>
        <tr>
            <th class="row">Height:</th><td><input type="text" name="image_height" class="" value="<?php echo get_option('image_height');?>"/></td>
        </tr>
        <tr>
            <th class="row">Interval:</th><td><input type="text" name="slidesjs_interval" class="" value="<?php echo get_option('slidesjs_interval');?>"/></td>
        </tr>
        <tr>
            <th class="row">Effect:</th><td><select id="slidesjs_effect" name="slidesjs_effect" >
                  <option value="slide" <?php echo $slide_effect;?>>Slide</option>
                  <option value="fade" <?php echo $fade_effect;?>>Fade</option>
                </select></td>
        </tr>
        <tr>
            <th class="row">Activate Pagination:</th><td><select id="slidesjs_pagination" name="slidesjs_pagination" >
                  <option value="true" <?php echo $activepagination_true;?>>True</option>
                  <option value="false" <?php echo $activepagination_false;?>>False</option>
                </select></td>
        </tr>
        <tr>
            <th class="row">Activate Navigation:</th><td><select id="slidesjs_navigation" name="slidesjs_navigation" >
                  <option value="true" <?php echo $activenavigation_true;?>>True</option>
                  <option value="false" <?php echo $activenavigation_false;?>>False</option>
                </select></td>
        </tr>
        <tr>
            <th class="row">Activate Play and Stop:</th><td><select id="slidesjs_playstop" name="slidesjs_playstop" >
                  <option value="true" <?php echo $activeplaystop_true;?>>True</option>
                  <option value="false" <?php echo $activeplaystop_false;?>>False</option>
                </select></td>
        </tr>
        <tr>
            <th class="row">Hover Pause:</th><td><select id="slidesjs_hoverpause" name="slidesjs_hoverpause" >
                  <option value="true" <?php echo $hoverpause_true;?>>True</option>
                  <option value="false" <?php echo $hoverpause_false;?>>False</option>
                </select></td>
        </tr>
        <tr>
            <th class="row">Callbacks</th><td></td>
        </tr>
        <tr>
            <th class="row">Loaded:</th>
            <td><textarea id="slidesjs_call_back_loaded" name="slidesjs_call_back_loaded"><?php echo get_option('slidesjs_call_back_loaded');?></textarea></td>
        </tr>
        <tr>
            <th class="row">Start:</th>
            <td><textarea id="slidesjs_call_back_start" name="slidesjs_call_back_start"><?php echo get_option('slidesjs_call_back_start');?></textarea></td>
        </tr>
        <tr>
            <th class="row">Complete:</th>
            <td><textarea id="slidesjs_call_back_complete" name="slidesjs_call_back_complete"><?php echo get_option('slidesjs_call_back_complete');?></textarea></td>
        </tr>
    </table>

    <input type="hidden" name="action" value="update" />
    <input type="hidden" name="page_options" value="image_width,image_height,slidesjs_effect,slidesjs_interval,slidesjs_hoverpause,slidesjs_pagination,slidesjs_navigation,slidesjs_playstop,slidesjs_call_back_loaded,slidesjs_call_back_start,slidesjs_call_back_complete" />
    <p class="submit"><input type="submit" value="Save" class="button button-primary"/></p>
    </form>
    <?php
}

function wp_taler_banner_settings() {
    add_submenu_page('edit.php?post_type=banner', 'Banner Settings', 'Banner Settings', 'edit_posts', basename(__FILE__), 'wp_taler_banner_settings_page');
}
add_action('admin_menu', 'wp_taler_banner_settings');
add_action('add_meta_boxes', 'add_custom_meta_boxes'); 
add_action('save_post', 'save_custom_meta_data');
add_action('post_edit_form_tag', 'update_edit_form');