part 4

assets/admin-page-builder.css

@@ -7,7 +7,11 @@
  * @author David Chandra Purnama <david@genbumedia.com>
  * @copyright Copyright (c) 2016, Genbu Media
 **/
+#postdivrich{
+	display: none; /* JS toggle will display this */
+}
 #fx-page-builder{
+	display: none; /* JS toggle will display this */
 	margin: 20px 0;
 }
 /* Templates */

assets/page-builder.css

@@ -0,0 +1,17 @@
+/**
+ * Front End Columns
+**/
+.fxpb-row:after{
+	content:".";display:block;height:0;clear:both;visibility:hidden;
+}
+.fxpb-col-1 .row-content{
+	width: 100%;
+}
+.fxpb-col-2 .row-content-1{
+	width: 48%;
+	float: left;
+}
+.fxpb-col-2 .row-content-2{
+	width: 48%;
+	float: right;
+}

fx-page-builder-base.php

@@ -40,6 +40,6 @@
 	require_once( FX_PBBASE_PATH . 'includes/page-builder.php' );
 }
 
-
-
+/* Functions */
+require_once( FX_PBBASE_PATH . 'includes/front-end.php' );
 

includes/front-end.php

@@ -0,0 +1,90 @@
+<?php
+/**
+ * Front End Output
+ * @since 1.0.0
+**/
+
+/* Filter Content as early as possible, but after all WP code filter runs. */
+add_filter( 'the_content', 'fxpb_filter_content', 10.5 );
+
+/**
+ * Filter Content
+ * @since 1.0.0
+**/
+function fxpb_filter_content( $content ){
+
+	/* In single page when page builder template selected. */
+	if( !is_admin() && is_page() && 'templates/page-builder.php' == get_page_template_slug( get_the_ID() ) ){
+
+		/* Add content with shortcode, autoembed, responsive image, etc. */
+		$content = fxpb_default_content_filter( fxpb_get_content() );
+	}
+
+	/* Return content */
+	return $content;
+}
+
+/**
+ * Page Builder Content Output
+ * This need to be use in the loop.
+ * @since 1.0.0
+**/
+function fxpb_get_content(){
+
+	/* Get saved rows data and sanitize it */
+	$row_datas = fxpb_sanitize( get_post_meta( get_the_ID(), 'fxpb', true ) );
+
+	/* return if no rows data */
+	if( !$row_datas ){
+		return '';
+	}
+
+	/* Content */
+	$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 .= '<div class="fxpb-row fxpb-row-' . $order . ' fxpb-col-1">' . "\r\n";
+			$content .= '<div class="row-content">' . "\r\n\r\n";
+			$content .= $row_data['content'] . "\r\n\r\n";
+			$content .= '</div>' . "\r\n";
+			$content .= '</div>' . "\r\n\r\n";
+		}
+		/* === Row with 2 columns === */
+		elseif( 'col-2' == $row_data['type'] ){
+			$content .= '<div class="fxpb-row fxpb-row-' . $order . ' fxpb-col-2">' . "\r\n";
+			$content .= '<div class="row-content-1">' . "\r\n\r\n";
+			$content .= $row_data['content-1'] . "\r\n\r\n";
+			$content .= '</div>' . "\r\n";
+			$content .= '<div class="row-content-2">' . "\r\n\r\n";
+			$content .= $row_data['content-2'] . "\r\n\r\n";
+			$content .= '</div>' . "\r\n";
+			$content .= '</div>' . "\r\n\r\n";
+		}
+	}
+	return $content;
+}
+
+
+/* === FRONT-END SCRIPTS === */
+
+/* Enqueue Script */
+add_action( 'wp_enqueue_scripts', 'fx_pbbase_front_end_scripts' );
+
+/**
+ * Admin Scripts
+ * @since 1.0.0
+ */
+function fx_pbbase_front_end_scripts(){
+
+	/* In a page using page builder */
+	if( is_page() && ( 'templates/page-builder.php' == get_page_template_slug( get_queried_object_id() ) ) ){
+
+		/* Enqueue CSS & JS For Page Builder */
+		wp_enqueue_style( 'fx-page-builder', FX_PBBASE_URI. 'assets/page-builder.css', array(), FX_PBBASE_VERSION );
+	}
+}

includes/functions.php

@@ -54,3 +54,26 @@ function fxpb_sanitize( $input ){
 }
 
 
+/**
+ * Enable Default Content Filter
+ * @since 1.0.0
+ */
+function fxpb_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;
+}
+

includes/page-builder.php

@@ -150,6 +150,68 @@ function fx_pbbase_save_post( $post_id, $post ){
 	elseif ( empty( $submitted_data ) && $saved_data ){
 		delete_post_meta( $post_id, 'fxpb' );
 	}
+
+	/* == 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/page-builder.php' == $page_template ){
+
+		/* Page builder content without row/column wrapper */
+		$pb_content = fxpb_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', 'fx_pbbase_save_post' );
+		wp_update_post( $this_post );
+		add_action( 'save_post', 'fx_pbbase_save_post' );
+	}
+
+	/* == Always delete page builder data if page template not selected == */
+	else{
+		delete_post_meta( $post_id, 'fxpb' );
+	}
+}
+
+
+/**
+ * Format Page Builder Content Without Wrapper Div.
+ * This is added to post content.
+ * @since 1.0.0
+**/
+function fxpb_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";
+		}
+		/* === 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;
 }
 
 

readme.md

@@ -23,7 +23,7 @@ This plugin is created as example in [Page Builder Tutorial Series](https://shel
 
 ## PART #4: Front-End Output, Theme Dependency, Save Data to Content
 
-[COMING SOON]
+[Read Tutorial](https://shellcreeper.com/wp-page-builder-from-scratch-4-front-end-output-theme-dependency-saving-data-to-content/)
 
 peace,<br/>
 David.