Skip to content

Instantly share code, notes, and snippets.

@bulentsakarya
Last active September 7, 2017 20:22
Show Gist options
  • Save bulentsakarya/cb84ad7b774318df653e902ad5a441db to your computer and use it in GitHub Desktop.
Save bulentsakarya/cb84ad7b774318df653e902ad5a441db to your computer and use it in GitHub Desktop.
nivo page builder
/**
* f(x) Page Builder Base Admin JS
* License: GPLv2 or later
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
*
* @link https://shellcreeper.com/wp-page-builder-plugin-from-scratch/
* @author David Chandra Purnama <[email protected]>
* @copyright Copyright (c) 2016, Genbu Media
**/
jQuery( document ).ready( function( $ ){
/* Function: Update Order */
function fxPB_UpdateOrder(){
/* In each of rows */
$('.nivo-rows > .nivo-row').each( function(i){
/* Increase num by 1 to avoid "0" as first index. */
var num = i + 1;
/* Update order number in row title */
$( this ).find( '.nivo-order' ).text( num );
/* In each input in the row */
$( this ).find( '.nivo-row-input' ).each( function(i) {
/* Get field id for this input */
var field = $( this ).attr( 'data-field' );
/* Update name attribute with order and field name. */
$( this ).attr( 'name', 'nivocontent[' + num + '][' + field + ']');
});
});
}
function fxPB_UpdateSelectUl() {
/* In each of rows */
$('.nivo-rows > .nivo-row').each( function(i){
/* Increase num by 1 to avoid "0" as first index. */
var num = i + 1;
/* In each input in the row */
$( this ).find( '.field-content' ).each( function(i) {
/* Get field id for this input */
var field2 = $( this ).attr( 'data-form' );
/* Update name attribute with order and field name. */
$( this ).attr('name', field2 + num );
});
});
}
function fxPB_SelectChanged() {
/* In each of rows */
$('.nivo-rows > .nivo-row').each( function(i){
/* In each input in the row */
$( this ).find( 'select.field-content' ).each( function(i) {
var aaa = $(this).attr('name');
$('select[name = ' + aaa ).change(function(){
$('ul.field-content').hide();
$('ul#' + $(this).val()).show();
});
});
});
}
/* Update Order on Page load */
fxPB_UpdateOrder();
fxPB_UpdateSelectUl();
/* Make Row Sortable */
$( '.nivo-rows' ).sortable({
handle: '.nivo-handle',
cursor: 'grabbing',
stop: function( e, ui ) {
fxPB_UpdateOrder();
fxPB_UpdateSelectUl();
},
});
/* Add Row */
$( 'body' ).on( 'click', '.nivo-add-row', function(e){
e.preventDefault();
/* Target the template. */
var template = '.nivo-templates > .nivo-' + $( this ).attr( 'data-template' );
/* Clone the template and add it. */
$( template ).clone().appendTo( '.nivo-rows' );
/* Hide Empty Row Message */
$( '.nivo-rows-message' ).hide();
/* Update Order */
fxPB_UpdateOrder();
fxPB_UpdateSelectUl();
/* Hide/Show Content *
$('#contentselector').change(function(){
$('ul.field-content').hide();
$('ul#' + $(this).val()).show();
});
$("input[name*='abc']").on('change', function() {
alert('The option with value ' + $(this).val());
}); */
fxPB_SelectChanged();
});
/* Hide/Show Empty Row Message On Page Load */
if( $( '.nivo-rows > .nivo-row' ).length ){
$( '.nivo-rows-message' ).hide();
}
else{
$( '.nivo-rows-message' ).show();
}
/* Delete Row */
$( 'body' ).on( 'click', '.nivo-remove', function(e){
e.preventDefault();
/* Delete Row */
$( this ).parents( '.nivo-row' ).remove();
/* Show Empty Message When Applicable. */
if( ! $( '.nivo-rows > .nivo-row' ).length ){
$( '.nivo-rows-message' ).show();
}
/* Update Order */
fxPB_UpdateOrder();
fxPB_UpdateSelectUl();
});
});
<?php
/**
* Page Builder Functions
* - Sanitize Page Builder Data
*
* @since 1.0.0
* @author David Chandra Purnama <[email protected]>
* @copyright Copyright (c) 2016, Genbu Media
**/
/**
* Sanitize Page Builder Data
* @since 1.0.0
*/
function nivopb_sanitize( $input ){
/* If data is not array, return. */
if( !is_array( $input ) ){
return null;
}
/* Output var */
$output = array();
/* Loop the data submitted */
foreach( $input as $row_order => $row_data ){
/* Only if row type is set */
if( isset( $row_data['type'] ) && $row_data['type'] ){
/* Get type of row ("col-1" or "col-2") */
$row_type = esc_attr( $row_data['type'] );
/* Row with 1 Column */
if( 'col-1' == $row_type ){
/* Sanitize value for "content" field. */
$output[$row_order]['content'] = wp_kses_post( $row_data['content'] );
$output[$row_order]['title'] = wp_kses_post( $row_data['title'] );
$output[$row_order]['count'] = wp_kses_post( $row_data['count'] );
$output[$row_order]['column'] = wp_kses_post( $row_data['column'] );
$output[$row_order]['view'] = wp_kses_post( $row_data['view'] );
$output[$row_order]['type'] = $row_type;
}
/* Row with 2 Columns */
elseif( 'col-2' == $row_type ){
/* Sanitize value for "content-1" and "content-2" field */
$output[$row_order]['content-1'] = wp_kses_post( $row_data['content-1'] );
$output[$row_order]['content-2'] = wp_kses_post( $row_data['content-2'] );
$output[$row_order]['type'] = $row_type;
}
}
}
return $output;
}
/**
* Enable Default Content Filter
* @since 1.0.0
*/
function nivopb_default_content_filter( $content ){
if( $content ){
global $wp_embed;
$content = $wp_embed->run_shortcode( $content );
$content = $wp_embed->autoembed( $content );
$content = wptexturize( $content );
$content = convert_smilies( $content );
$content = convert_chars( $content );
$content = wptexturize( $content );
$content = do_shortcode( $content );
$content = shortcode_unautop( $content );
if( function_exists('wp_make_content_images_responsive') ) { /* WP 4.4+ */
$content = wp_make_content_images_responsive( $content );
}
$content = wpautop( $content );
}
return $content;
}
/* === ADD PAGE BUILDER CONTROL === */
/* Add page builder form after editor */
add_action( 'edit_form_after_editor', 'nivopb_editor_callback', 10, 2 );
/**
* Page Builder Control
* Added after Content Editor in Page Edit Screen.
* @since 1.0.0
*/
function nivopb_editor_callback( $post ){
$terms = get_terms( 'product_cat' );
if( 'page' !== $post->post_type ){
return;
}
?>
<div id="nivo-page-builder">
<div class="nivo-actions">
<a href="#" class="nivo-add-row button-primary button-large" data-template="col-1">Tam Sayfa</a>
<a href="#" class="nivo-add-row button-primary button-large" data-template="col-2">2 Sütun</a>
</div><!-- .nivo-actions -->
<div class="nivo-rows">
<?php nivopb_render_rows( $post ); // display saved rows ?>
</div><!-- .nivo-rows -->
<div class="nivo-templates" style="display:none;">
<?php /* == This is the 1 column row template == */ ?>
<div class="nivo-row nivo-col-1">
<div class="nivo-row-title">
<span class="nivo-handle"><i class="fa fa-arrows-alt" aria-hidden="true"></i></span>
<span class="nivo-order">0</span>
<span class="nivo-row-title-text">Tam Sayfa</span>
<span class="nivo-remove"><i class="fa fa-trash-o" aria-hidden="true"></i></span>
</div><!-- .nivo-row-title -->
<div class="nivo-row-fields">
<ul class="main-field">
<li>
<div class="label">İçerik:</div>
<div class="form">
<select id="contentselector" name="" class="field-content" data-form="abc">
<option value="-1">Seçiniz</option>
<option value="newproducts"><?php _e('Yeni Ürünler', 'nivothemes'); ?>
<option value="popularproducts"><?php _e('Popüler Ürünler', 'nivothemes'); ?>
<option value="onsaleproducts"><?php _e('İndirimli Ürünler', 'nivothemes'); ?>
<option value="featuredproducts"><?php _e('Öne Çıkan Ürünler', 'nivothemes'); ?>
<option value="bestsellingproducts"><?php _e('Çok Satan Ürünler', 'nivothemes'); ?>
<option value="productcategories"><?php _e('Kategoriler', 'nivothemes'); ?>
<option value="categorycontent"><?php _e('Kategori Ürünleri', 'nivothemes'); ?>
<option value="tabcontent"><?php _e('Sekmeli İçerik', 'nivothemes'); ?>
<option value="latestposts"><?php _e('Son Yazılar', 'nivothemes'); ?>
<option value="homeboxes"><?php _e('Açıklama Kutuları', 'nivothemes'); ?>
<option value="statictext"><?php _e('Sabit Yazı', 'nivothemes'); ?>
<?php if ( taxonomy_exists( 'brand' ) ) { ?>
<option value="productbrands"><?php _e('Markalar', 'nivothemes'); ?>
<?php } ?>
<option value="testimonials"><?php _e('Müşteri Görüşleri', 'nivothemes'); ?>
</select>
</div>
</li>
</ul>
<ul id="newproducts" class="field-content" style="display: none;" data-form="abc">
<li>
<div class="label">N Başlık:</div>
<div class="form">
<input type="text" name="" class="nivo-row-input" data-field="title" placeholder="<?php _e('Bölüm Başlığını Yazınız', 'nivothemes'); ?>">
</div>
</li>
<li>
<div class="label">Ürün Sayısı:</div>
<div class="form">
<input type="number" min="1" name="" class="nivo-row-input" data-field="count" value="4">
</div>
</li>
<li>
<div class="label">Sütun Sayısı:</div>
<div class="form">
<input type="number" min="1" name="" class="nivo-row-input" data-field="column" value="4">
</div>
</li>
<li>
<div class="label">Görünüm:</div>
<div class="form">
<div class="radio">
<input type="radio" name="" data-field="view" value="standart" selected="selected"> <?php _e('Standart', 'nivothemes'); ?>
<input type="radio" name="" data-field="view" value="carousel"> <?php _e('Carousel', 'nivothemes'); ?>
</div>
</div>
</li>
</ul>
<ul id="popularproducts" class="field-content" style="display: none;" data-form="abc">
<li>
<div class="label">P Başlık:</div>
<div class="form">
<input type="text" name="" class="nivo-row-input" data-field="title" placeholder="<?php _e('Bölüm Başlığını Yazınız', 'nivothemes'); ?>">
</div>
</li>
<li>
<div class="label">Ürün Sayısı:</div>
<div class="form">
<input type="number" min="1" name="" class="nivo-row-input" data-field="count" value="4">
</div>
</li>
<li>
<div class="label">Sütun Sayısı:</div>
<div class="form">
<input type="number" min="1" name="" class="nivo-row-input" data-field="column" value="4">
</div>
</li>
<li>
<div class="label">Görünüm:</div>
<div class="form">
<div class="radio">
<input type="radio" name="" data-field="view" value="standart" selected="selected"> <?php _e('Standart', 'nivothemes'); ?>
<input type="radio" name="" data-field="view" value="carousel"> <?php _e('Carousel', 'nivothemes'); ?>
</div>
</div>
</li>
</ul>
<ul id="onsaleproducts" class="field-content" style="display: none;" data-form="abc">
<li>
<div class="label">O Başlık:</div>
<div class="form">
<input type="text" name="" class="nivo-row-input" data-field="title" placeholder="<?php _e('Bölüm Başlığını Yazınız', 'nivothemes'); ?>">
</div>
</li>
<li>
<div class="label">Ürün Sayısı:</div>
<div class="form">
<input type="number" min="1" name="" class="nivo-row-input" data-field="count" value="4">
</div>
</li>
<li>
<div class="label">Sütun Sayısı:</div>
<div class="form">
<input type="number" min="1" name="" class="nivo-row-input" data-field="column" value="4">
</div>
</li>
<li>
<div class="label">Görünüm:</div>
<div class="form">
<div class="radio">
<input type="radio" name="" data-field="view" value="standart" selected="selected"> <?php _e('Standart', 'nivothemes'); ?>
<input type="radio" name="" data-field="view" value="carousel"> <?php _e('Carousel', 'nivothemes'); ?>
</div>
</div>
</li>
</ul>
<input class="nivo-row-input" type="hidden" name="" data-field="type" value="col-1">
</div><!-- .nivo-row-fields -->
</div><!-- .nivo-row.nivo-col-1 -->
<?php /* == This is the 2 columns row template == */ ?>
<div class="nivo-row nivo-col-2">
<div class="nivo-row-title">
<span class="nivo-handle"><i class="fa fa-arrows-alt" aria-hidden="true"></i></span>
<span class="nivo-order">0</span>
<span class="nivo-row-title-text">2 Columns</span>
<span class="nivo-remove"><i class="fa fa-trash-o" aria-hidden="true"></i></span>
</div><!-- .nivo-row-title -->
<div class="nivo-row-fields">
<div class="nivo-col-2-left">
<textarea class="nivo-row-input" name="" data-field="content-1" placeholder="1st column content here..."></textarea>
</div><!-- .nivo-col-2-left -->
<div class="nivo-col-2-right">
<textarea class="nivo-row-input" name="" data-field="content-2" placeholder="2nd column content here..."></textarea>
</div><!-- .nivo-col-2-right -->
<input class="nivo-row-input" type="hidden" name="" data-field="type" value="col-2">
</div><!-- .nivo-row-fields -->
</div><!-- .nivo-row.nivo-col-2 -->
</div><!-- .nivo-templates -->
<?php wp_nonce_field( "nivopb_nonce_action", "nivopb_nonce" ) ?>
</div><!-- .nivo-page-builder -->
<?php
}
/* === SAVE PAGE BUILDER DATA === */
/* Save post meta on the 'save_post' hook. */
add_action( 'save_post', 'nivopb_save_post', 10, 2 );
/**
* Save Page Builder Data When Saving Page
* @since 1.0.0
*/
function nivopb_save_post( $post_id, $post ){
/* Stripslashes Submitted Data */
$request = stripslashes_deep( $_POST );
/* Verify/validate */
if ( ! isset( $request['nivopb_nonce'] ) || ! wp_verify_nonce( $request['nivopb_nonce'], 'nivopb_nonce_action' ) ){
return $post_id;
}
/* Do not save on autosave */
if ( defined('DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
return $post_id;
}
/* Check post type and user caps. */
$post_type = get_post_type_object( $post->post_type );
if ( 'page' != $post->post_type || !current_user_can( $post_type->cap->edit_post, $post_id ) ){
return $post_id;
}
/* == Save, Delete, or Update Page Builder Data == */
/* Get (old) saved page builder data */
$saved_data = get_post_meta( $post_id, 'nivocontent', true );
/* Get new submitted data and sanitize it. */
$submitted_data = isset( $request['nivocontent'] ) ? nivopb_sanitize( $request['nivocontent'] ) : null;
/* New data submitted, No previous data, create it */
if ( $submitted_data && '' == $saved_data ){
add_post_meta( $post_id, 'nivocontent', $submitted_data, true );
}
/* New data submitted, but it's different data than previously stored data, update it */
elseif( $submitted_data && ( $submitted_data != $saved_data ) ){
update_post_meta( $post_id, 'nivocontent', $submitted_data );
}
/* New data submitted is empty, but there's old data available, delete it. */
elseif ( empty( $submitted_data ) && $saved_data ){
delete_post_meta( $post_id, 'nivocontent' );
}
/* == Get Selected Page Template == */
$page_template = isset( $request['page_template'] ) ? esc_attr( $request['page_template'] ) : null;
/* == Page Builder Template Selected, Save to Post Content == */
if( 'templates/home-page.php' == $page_template ){
/* Page builder content without row/column wrapper */
$pb_content = nivopb_format_post_content_data( $submitted_data );
/* Post Data To Save */
$this_post = array(
'ID' => $post_id,
'post_content' => sanitize_post_field( 'post_content', $pb_content, $post_id, 'db' ),
);
/**
* Prevent infinite loop.
* @link https://developer.wordpress.org/reference/functions/wp_update_post/
*/
remove_action( 'save_post', 'nivopb_save_post' );
wp_update_post( $this_post );
add_action( 'save_post', 'nivopb_save_post' );
}
/* == Always delete page builder data if page template not selected == */
else{
delete_post_meta( $post_id, 'nivocontent' );
}
}
/**
* Format Page Builder Content Without Wrapper Div.
* This is added to post content.
* @since 1.0.0
**/
function nivopb_format_post_content_data( $row_datas ){
/* return if no rows data */
if( !$row_datas ){
return '';
}
/* Output */
$content = '';
/* Loop for each rows */
foreach( $row_datas as $order => $row_data ){
$order = intval( $order );
/* === Row with 1 column === */
if( 'col-1' == $row_data['type'] ){
$content .= $row_data['content'] . "\r\n\r\n";
$content .= $row_data['title'] . "\r\n\r\n";
$content .= $row_data['count'] . "\r\n\r\n";
$content .= $row_data['column'] . "\r\n\r\n";
$content .= $row_data['view'] . "\r\n\r\n";
}
/* === Row with 2 columns === */
elseif( 'col-2' == $row_data['type'] ){
$content .= $row_data['content-1'] . "\r\n\r\n";
$content .= $row_data['content-2'] . "\r\n\r\n";
}
}
return $content;
}
/**
* Render Saved Rows
* @since 1.0.0
*/
function nivopb_render_rows( $post ){
/* Get saved rows data and sanitize it */
$row_datas = nivopb_sanitize( get_post_meta( $post->ID, 'nivocontent', true ) );
/* Default Message */
$default_message = 'Please add row to start!';
/* return if no rows data */
if( !$row_datas ){
echo '<p class="nivo-rows-message">' . $default_message . '</p>';
return;
}
/* Data available, hide default notice */
else{
echo '<p class="nivo-rows-message" style="display:none;">' . $default_message . '</p>';
}
/* Loop for each rows */
foreach( $row_datas as $order => $row_data ){
$order = intval( $order );
/* === Row with 1 column === */
if( 'col-1' == $row_data['type'] ){
?>
<div class="nivo-row nivo-col-1">
<div class="nivo-row-title">
<span class="nivo-handle"><i class="fa fa-arrows-alt" aria-hidden="true"></i></span>
<span class="nivo-order"><?php echo $order; ?></span>
<span class="nivo-row-title-text">Tam Sayfa</span>
<span class="nivo-remove"><i class="fa fa-trash-o" aria-hidden="true"></i></span>
</div><!-- .nivo-row-title -->
<div class="nivo-row-fields">
<ul class="main-field">
<li>
<div class="label">İçerik:</div>
<div class="form">
<select name="nivocontent[<?php echo $order; ?>][content]" class="nivo-row-input" data-field="content">
<option value="-1">Seçiniz</option>
<option value="newproducts" <?php echo $row_data['content'] === "newproducts" ? 'selected' : '' ?>><?php _e('Yeni Ürünler', 'nivothemes'); ?>
<option value="popularproducts" <?php echo $row_data['content'] === "popularproducts" ? 'selected' : '' ?>><?php _e('Popüler Ürünler', 'nivothemes'); ?>
<option value="onsaleproducts" <?php echo $row_data['content'] === "onsaleproducts" ? 'selected' : '' ?>><?php _e('İndirimli Ürünler', 'nivothemes'); ?>
<option value="featuredproducts" <?php echo $row_data['content'] === "featuredproducts" ? 'selected' : '' ?>><?php _e('Öne Çıkan Ürünler', 'nivothemes'); ?>
<option value="bestsellingproducts" <?php echo $row_data['content'] === "bestsellingproducts" ? 'selected' : '' ?>><?php _e('Çok Satan Ürünler', 'nivothemes'); ?>
<option value="productcategories" <?php echo $row_data['content'] === "productcategories" ? 'selected' : '' ?>><?php _e('Kategoriler', 'nivothemes'); ?>
<option value="categorycontent" <?php echo $row_data['content'] === "categorycontent" ? 'selected' : '' ?>><?php _e('Kategori Ürünleri', 'nivothemes'); ?>
<option value="tabcontent" <?php echo $row_data['content'] === "tabcontent" ? 'selected' : '' ?>><?php _e('Sekmeli İçerik', 'nivothemes'); ?>
<option value="latestposts" <?php echo $row_data['content'] === "latestposts" ? 'selected' : '' ?>><?php _e('Son Yazılar', 'nivothemes'); ?>
<option value="homeboxes" <?php echo $row_data['content'] === "homeboxes" ? 'selected' : '' ?>><?php _e('Açıklama Kutuları', 'nivothemes'); ?>
<option value="statictext" <?php echo $row_data['content'] === "statictext" ? 'selected' : '' ?>><?php _e('Sabit Yazı', 'nivothemes'); ?>
<?php if ( taxonomy_exists( 'brand' ) ) { ?>
<option value="productbrands" <?php echo $row_data['content'] === "productbrands" ? 'selected' : '' ?>><?php _e('Markalar', 'nivothemes'); ?>
<?php } ?>
<option value="testimonials" <?php echo $row_data['content'] === "testimonials" ? 'selected' : '' ?>><?php _e('Müşteri Görüşleri', 'nivothemes'); ?>
</select>
</div>
</li>
</ul>
<ul class="field-content">
<li>
<div class="label">Başlık:</div>
<div class="form">
<input type="text" name="nivocontent[<?php echo $order; ?>][title]" class="nivo-row-input" data-field="title" value="<?php echo esc_attr( $row_data['title'] ); ?>">
</div>
</li>
<li>
<div class="label">Ürün Sayısı:</div>
<div class="form">
<input type="number" min="1" name="nivocontent[<?php echo $order; ?>][count]" class="nivo-row-input" data-field="count" value="<?php echo esc_attr( $row_data['count'] ); ?>">
</div>
</li>
<li>
<div class="label">Sütun Sayısı:</div>
<div class="form">
<input type="number" min="1" name="nivocontent[<?php echo $order; ?>][column]" class="nivo-row-input" data-field="column" value="<?php echo esc_attr( $row_data['column'] ); ?>">
</div>
</li>
<li>
<div class="label">Görünüm:</div>
<div class="form">
<div class="radio">
<input type="radio" name="nivocontent[<?php echo $order; ?>][view]" data-field="view" value="standart" <?php echo $row_data['view'] === "standart" ? 'checked' : '' ?>> <?php _e('Standart', 'nivothemes'); ?>
<input type="radio" name="nivocontent[<?php echo $order; ?>][view]" data-field="view" value="carousel" <?php echo $row_data['view'] === "carousel" ? 'checked' : '' ?>> <?php _e('Carousel', 'nivothemes'); ?>
</div>
</div>
</li>
</ul>
<input class="nivo-row-input" type="hidden" name="nivocontent[<?php echo $order; ?>][type]" data-field="type" value="col-1">
</div><!-- .nivo-row-fields -->
</div><!-- .nivo-row.nivo-col-1 -->
<?php
}
/* === Row with 2 columns === */
elseif( 'col-2' == $row_data['type'] ){
?>
<div class="nivo-row nivo-col-2">
<div class="nivo-row-title">
<span class="nivo-handle"><i class="fa fa-arrows-alt" aria-hidden="true"></i></span>
<span class="nivo-order"><?php echo $order; ?></span>
<span class="nivo-row-title-text">2 Columns</span>
<span class="nivo-remove"><i class="fa fa-trash-o" aria-hidden="true"></i></span>
</div><!-- .nivo-row-title -->
<div class="nivo-row-fields">
<div class="nivo-col-2-left">
<textarea class="nivo-row-input" name="nivocontent[<?php echo $order; ?>][content-1]" data-field="content-1" placeholder="1st column content here..."><?php echo esc_textarea( $row_data['content-1'] ); ?></textarea>
</div><!-- .nivo-col-2-left -->
<div class="nivo-col-2-right">
<textarea class="nivo-row-input" name="nivocontent[<?php echo $order; ?>][content-2]" data-field="content-2" placeholder="2nd column content here..."><?php echo esc_textarea( $row_data['content-2'] ); ?></textarea>
</div><!-- .nivo-col-2-right -->
<input class="nivo-row-input" type="hidden" name="nivocontent[<?php echo $order; ?>][type]" data-field="type" value="col-2">
</div><!-- .nivo-row-fields -->
</div><!-- .nivo-row.nivo-col-2 -->
<?php
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment