EVERY ACTION HAS A REACTION
So now we can set our options in the Theme Customizer and get saved the settings directy in the database (calling these ones will be essential for the working of the plugin later!). However, we still have to do much of the work; we have, indeed, to link our settings values to the Divi meta-box options.
COPY THE FUNCTION THAT RETURNS THE META BOX
The first step in order to do it, is simply copy and paste the function “et_single_settings_meta_box” from the functions.php of the Divi theme (should start at line 374).
NOTE: Be careful to copy the if statement wrapping the function (see line 1 and 122) that’s going to check if the same function doesn’t already exist. It’s very important because you can’t redeclare the same function in two places at the same time and doing it you will get a fatal error and the plugin itself will not be activated!
if ( ! function_exists( 'et_single_settings_meta_box' ) ) :
function et_single_settings_meta_box( $post ) {
$post_id = get_the_ID();
wp_nonce_field( basename( __FILE__ ), 'et_settings_nonce' );
$page_layout = get_post_meta( $post_id, '_et_pb_page_layout', true );
$side_nav = get_post_meta( $post_id, '_et_pb_side_nav', true );
$project_nav = get_post_meta( $post_id, '_et_pb_project_nav', true );
$post_hide_nav = get_post_meta( $post_id, '_et_pb_post_hide_nav', true );
$post_hide_nav = $post_hide_nav && 'off' === $post_hide_nav ? 'default' : $post_hide_nav;
$show_title = get_post_meta( $post_id, '_et_pb_show_title', true );
if ( is_rtl() ) {
$page_layouts = array(
'et_left_sidebar' => esc_html__( 'Left Sidebar', 'Divi' ),
'et_right_sidebar' => esc_html__( 'Right Sidebar', 'Divi' ),
'et_full_width_page' => esc_html__( 'Fullwidth', 'Divi' ),
);
} else {
$page_layouts = array(
'et_right_sidebar' => esc_html__( 'Right Sidebar', 'Divi' ),
'et_left_sidebar' => esc_html__( 'Left Sidebar', 'Divi' ),
'et_full_width_page' => esc_html__( 'Fullwidth', 'Divi' ),
);
}
$layouts = array(
'light' => esc_html__( 'Light', 'Divi' ),
'dark' => esc_html__( 'Dark', 'Divi' ),
);
$post_bg_color = ( $bg_color = get_post_meta( $post_id, '_et_post_bg_color', true ) ) && '' !== $bg_color
? $bg_color
: '#ffffff';
$post_use_bg_color = get_post_meta( $post_id, '_et_post_use_bg_color', true )
? true
: false;
$post_bg_layout = ( $layout = get_post_meta( $post_id, '_et_post_bg_layout', true ) ) && '' !== $layout
? $layout
: 'light'; ?>
<p class="et_pb_page_settings et_pb_page_layout_settings">
<label for="et_pb_page_layout" style="display: block; font-weight: bold; margin-bottom: 5px;"><?php esc_html_e( 'Page Layout', 'Divi' ); ?>: </label>
<select id="et_pb_page_layout" name="et_pb_page_layout">
<?php
foreach ( $page_layouts as $layout_value => $layout_name ) {
printf( '<option value="%2$s"%3$s>%1$s</option>',
esc_html( $layout_name ),
esc_attr( $layout_value ),
selected( $layout_value, $page_layout, false )
);
} ?>
</select>
</p>
<p class="et_pb_page_settings et_pb_side_nav_settings" style="display: none;">
<label for="et_pb_side_nav" style="display: block; font-weight: bold; margin-bottom: 5px;"><?php esc_html_e( 'Dot Navigation', 'Divi' ); ?>: </label>
<select id="et_pb_side_nav" name="et_pb_side_nav">
<option value="off" <?php selected( 'off', $side_nav ); ?>><?php esc_html_e( 'Off', 'Divi' ); ?></option>
<option value="on" <?php selected( 'on', $side_nav ); ?>><?php esc_html_e( 'On', 'Divi' ); ?></option>
</select>
</p>
<p class="et_pb_page_settings">
<label for="et_pb_post_hide_nav" style="display: block; font-weight: bold; margin-bottom: 5px;"><?php esc_html_e( 'Hide Nav Before Scroll', 'Divi' ); ?>: </label>
<select id="et_pb_post_hide_nav" name="et_pb_post_hide_nav">
<option value="default" <?php selected( 'default', $post_hide_nav ); ?>><?php esc_html_e( 'Default', 'Divi' ); ?></option>
<option value="no" <?php selected( 'no', $post_hide_nav ); ?>><?php esc_html_e( 'Off', 'Divi' ); ?></option>
<option value="on" <?php selected( 'on', $post_hide_nav ); ?>><?php esc_html_e( 'On', 'Divi' ); ?></option>
</select>
</p>
<?php if ( 'post' === $post->post_type ) : ?>
<p class="et_pb_page_settings et_pb_single_title" style="display: none;">
<label for="et_single_title" style="display: block; font-weight: bold; margin-bottom: 5px;"><?php esc_html_e( 'Post Title', 'Divi' ); ?>: </label>
<select id="et_single_title" name="et_single_title">
<option value="on" <?php selected( 'on', $show_title ); ?>><?php esc_html_e( 'Show', 'Divi' ); ?></option>
<option value="off" <?php selected( 'off', $show_title ); ?>><?php esc_html_e( 'Hide', 'Divi' ); ?></option>
</select>
</p>
<p class="et_divi_quote_settings et_divi_audio_settings et_divi_link_settings et_divi_format_setting et_pb_page_settings">
<label for="et_post_use_bg_color" style="display: block; font-weight: bold; margin-bottom: 5px;"><?php esc_html_e( 'Use Background Color', 'Divi' ); ?></label>
<input name="et_post_use_bg_color" type="checkbox" id="et_post_use_bg_color" <?php checked( $post_use_bg_color ); ?> />
</p>
<p class="et_post_bg_color_setting et_divi_format_setting et_pb_page_settings">
<input id="et_post_bg_color" name="et_post_bg_color" class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value', 'Divi' ); ?>" value="<?php echo esc_attr( $post_bg_color ); ?>" data-default-color="#ffffff" />
</p>
<p class="et_divi_quote_settings et_divi_audio_settings et_divi_link_settings et_divi_format_setting">
<label for="et_post_bg_layout" style="font-weight: bold; margin-bottom: 5px;"><?php esc_html_e( 'Text Color', 'Divi' ); ?>: </label>
<select id="et_post_bg_layout" name="et_post_bg_layout">
<?php
foreach ( $layouts as $layout_name => $layout_title )
printf( '<option value="%s"%s>%s</option>',
esc_attr( $layout_name ),
selected( $layout_name, $post_bg_layout, false ),
esc_html( $layout_title )
);
?>
</select>
</p>
<?php endif;
if ( 'project' === $post->post_type ) : ?>
<p class="et_pb_page_settings et_pb_project_nav" style="display: none;">
<label for="et_project_nav" style="display: block; font-weight: bold; margin-bottom: 5px;"><?php esc_html_e( 'Project Navigation', 'Divi' ); ?>: </label>
<select id="et_project_nav" name="et_project_nav">
<option value="off" <?php selected( 'off', $project_nav ); ?>><?php esc_html_e( 'Hide', 'Divi' ); ?></option>
<option value="on" <?php selected( 'on', $project_nav ); ?>><?php esc_html_e( 'Show', 'Divi' ); ?></option>
</select>
</p>
<?php endif;
}
endif;
WRAPPING THE OPTIONS IN IF… ELSE STATEMENTS
The core of our plugin will do a simple thing. It let you to save your preferences about the post Layout (Right Sidebar, Left Sidebar or Fullwidth), the Dot Navigation (Off or On), the Hide Nav before scroll (Default, Off or On) and finally about showing the Post Title (Show or Hide).
After that, we have to go in the meta-box function above and move up and down thetags accordingly to the preferences we have saved in the Theme Customizer.
Here come in the rule and the importance of the If… Else statements for our plugin (and for many many others!). In Php the If statement, in all its forms, is the core itself of coding. So we will do something like: let’s say the user go to the Theme Customizer -> Blog -> Divi Post Settings -> Page Layout and select Right Sidebar, then save value ‘Right’ in the database, then recall this value and IF the value = ‘Right’ then show the sidebar on the right, (ELSE) IF instead the value saved = ‘Left’, show it on the left, (ELSE) otherwise show a fullwidth page layout.
Applying this logical reasoning to all our options will give us, in short, the following code:
/* ROUND THE META-BOX OPTIONS WITH IF... ELSE STATEMENTS */
if ( ! function_exists( 'et_single_settings_meta_box' ) ) :
/* DIVI DEFAULT POST SETTINGS */
function et_single_settings_meta_box( $post ) {
$post_id = get_the_ID();
$page_layout_opt = get_option( 'idivi_post_settings_sidebar' );
$dot_nav_opt = get_option( 'idivi_post_settings_dot' );
$before_scroll_opt = get_option( 'idivi_post_settings_before_scroll' );
$title_opt = get_option( 'idivi_post_settings_post_title' );
wp_nonce_field( basename( __FILE__ ), 'et_settings_nonce' );
$page_layout = get_post_meta( $post_id, '_et_pb_page_layout', true );
$side_nav = get_post_meta( $post_id, '_et_pb_side_nav', true );
$project_nav = get_post_meta( $post_id, '_et_pb_project_nav', true );
$post_hide_nav = get_post_meta( $post_id, '_et_pb_post_hide_nav', true );
$post_hide_nav = $post_hide_nav && 'off' === $post_hide_nav ? 'default' : $post_hide_nav;
$show_title = get_post_meta( $post_id, '_et_pb_show_title', true );
if ( !$page_layout_opt || $page_layout_opt === 'Right') {
if ( is_rtl() ) {
$page_layouts = array(
'et_left_sidebar' => esc_html__( 'Left Sidebar', 'Divi' ),
'et_right_sidebar' => esc_html__( 'Right Sidebar', 'Divi' ),
'et_full_width_page' => esc_html__( 'Fullwidth', 'Divi' ),
);
} else {
$page_layouts = array(
'et_right_sidebar' => esc_html__( 'Right Sidebar', 'Divi' ),
'et_left_sidebar' => esc_html__( 'Left Sidebar', 'Divi' ),
'et_full_width_page' => esc_html__( 'Fullwidth', 'Divi' ),
);
}
} else if ( $page_layout_opt === 'Left' ) {
if ( is_rtl() ) {
$page_layouts = array(
'et_right_sidebar' => esc_html__( 'Right Sidebar', 'Divi' ),
'et_left_sidebar' => esc_html__( 'Left Sidebar', 'Divi' ),
'et_full_width_page' => esc_html__( 'Fullwidth', 'Divi' ),
);
} else {
$page_layouts = array(
'et_left_sidebar' => esc_html__( 'Left Sidebar', 'Divi' ),
'et_right_sidebar' => esc_html__( 'Right Sidebar', 'Divi' ),
'et_full_width_page' => esc_html__( 'Fullwidth', 'Divi' ),
);
}
} else {
if ( is_rtl() ) {
$page_layouts = array(
'et_full_width_page' => esc_html__( 'Fullwidth', 'Divi' ),
'et_left_sidebar' => esc_html__( 'Left Sidebar', 'Divi' ),
'et_right_sidebar' => esc_html__( 'Right Sidebar', 'Divi' ),
);
} else {
$page_layouts = array(
'et_full_width_page' => esc_html__( 'Fullwidth', 'Divi' ),
'et_right_sidebar' => esc_html__( 'Right Sidebar', 'Divi' ),
'et_left_sidebar' => esc_html__( 'Left Sidebar', 'Divi' ),
);
}
}
$layouts = array(
'light' => esc_html__( 'Light', 'Divi' ),
'dark' => esc_html__( 'Dark', 'Divi' ),
);
$post_bg_color = ( $bg_color = get_post_meta( $post_id, '_et_post_bg_color', true ) ) && '' !== $bg_color
? $bg_color
: '#ffffff';
$post_use_bg_color = get_post_meta( $post_id, '_et_post_use_bg_color', true )
? true
: false;
$post_bg_layout = ( $layout = get_post_meta( $post_id, '_et_post_bg_layout', true ) ) && '' !== $layout
? $layout
: 'light'; ?>
<p class="et_pb_page_settings et_pb_page_layout_settings">
<label for="et_pb_page_layout" style="display: block; font-weight: bold; margin-bottom: 5px;"><?php esc_html_e( 'Page Layout', 'Divi' ); ?>: </label>
<select id="et_pb_page_layout" name="et_pb_page_layout">
<?php
foreach ( $page_layouts as $layout_value => $layout_name ) {
printf( '<option value="%2$s"%3$s>%1$s</option>',
esc_html( $layout_name ),
esc_attr( $layout_value ),
selected( $layout_value, $page_layout, false )
);
} ?>
</select>
</p>
<p class="et_pb_page_settings et_pb_side_nav_settings" style="display: none;">
<label for="et_pb_side_nav" style="display: block; font-weight: bold; margin-bottom: 5px;"><?php esc_html_e( 'Dot Navigation', 'Divi' ); ?>: </label>
<?php if ( !$dot_nav_opt || $dot_nav_opt === 'Off') { ?>
<select id="et_pb_side_nav" name="et_pb_side_nav">
<option value="off" <?php selected( 'off', $side_nav ); ?>><?php esc_html_e( 'Off', 'Divi' ); ?></option>
<option value="on" <?php selected( 'on', $side_nav ); ?>><?php esc_html_e( 'On', 'Divi' ); ?></option>
</select>
<?php } else { ?>
<select id="et_pb_side_nav" name="et_pb_side_nav">
<option value="on" <?php selected( 'on', $side_nav ); ?>><?php esc_html_e( 'On', 'Divi' ); ?></option>
<option value="off" <?php selected( 'off', $side_nav ); ?>><?php esc_html_e( 'Off', 'Divi' ); ?></option>
</select>
<?php } ?>
</p>
<p class="et_pb_page_settings">
<label for="et_pb_post_hide_nav" style="display: block; font-weight: bold; margin-bottom: 5px;"><?php esc_html_e( 'Hide Nav Before Scroll', 'Divi' ); ?>: </label>
<?php if ( !$before_scroll_opt || $before_scroll_opt === 'Default') { ?>
<select id="et_pb_post_hide_nav" name="et_pb_post_hide_nav">
<option value="default" <?php selected( 'default', $post_hide_nav ); ?>><?php esc_html_e( 'Default', 'Divi' ); ?></option>
<option value="no" <?php selected( 'no', $post_hide_nav ); ?>><?php esc_html_e( 'Off', 'Divi' ); ?></option>
<option value="on" <?php selected( 'on', $post_hide_nav ); ?>><?php esc_html_e( 'On', 'Divi' ); ?></option>
</select>
<?php } else if ( $before_scroll_opt === 'Off' ) { ?>
<select id="et_pb_post_hide_nav" name="et_pb_post_hide_nav">
<option value="no" <?php selected( 'no', $post_hide_nav ); ?>><?php esc_html_e( 'Off', 'Divi' ); ?></option>
<option value="default" <?php selected( 'default', $post_hide_nav ); ?>><?php esc_html_e( 'Default', 'Divi' ); ?></option>
<option value="on" <?php selected( 'on', $post_hide_nav ); ?>><?php esc_html_e( 'On', 'Divi' ); ?></option>
</select>
<?php } else { ?>
<select id="et_pb_post_hide_nav" name="et_pb_post_hide_nav">
<option value="on" <?php selected( 'on', $post_hide_nav ); ?>><?php esc_html_e( 'On', 'Divi' ); ?></option>
<option value="default" <?php selected( 'default', $post_hide_nav ); ?>><?php esc_html_e( 'Default', 'Divi' ); ?></option>
<option value="no" <?php selected( 'no', $post_hide_nav ); ?>><?php esc_html_e( 'Off', 'Divi' ); ?></option>
</select>
<?php } ?>
</p>
<?php if ( 'post' === $post->post_type ) : ?>
<p class="et_pb_page_settings et_pb_single_title" style="display: none;">
<label for="et_single_title" style="display: block; font-weight: bold; margin-bottom: 5px;"><?php esc_html_e( 'Post Title', 'Divi' ); ?>: </label>
<?php if ( !$title_opt || $title_opt === 'Show') { ?>
<select id="et_single_title" name="et_single_title">
<option value="on" <?php selected( 'on', $show_title ); ?>><?php esc_html_e( 'Show', 'Divi' ); ?></option>
<option value="off" <?php selected( 'off', $show_title ); ?>><?php esc_html_e( 'Hide', 'Divi' ); ?></option>
</select>
<?php } else { ?>
<select id="et_single_title" name="et_single_title">
<option value="off" <?php selected( 'off', $show_title ); ?>><?php esc_html_e( 'Hide', 'Divi' ); ?></option>
<option value="on" <?php selected( 'on', $show_title ); ?>><?php esc_html_e( 'Show', 'Divi' ); ?></option>
</select>
<?php } ?>
</p>
<p class="et_divi_quote_settings et_divi_audio_settings et_divi_link_settings et_divi_format_setting et_pb_page_settings">
<label for="et_post_use_bg_color" style="display: block; font-weight: bold; margin-bottom: 5px;"><?php esc_html_e( 'Use Background Color', 'Divi' ); ?></label>
<input name="et_post_use_bg_color" type="checkbox" id="et_post_use_bg_color" <?php checked( $post_use_bg_color ); ?> />
</p>
<p class="et_post_bg_color_setting et_divi_format_setting et_pb_page_settings">
<input id="et_post_bg_color" name="et_post_bg_color" class="color-picker-hex" type="text" maxlength="7" placeholder="<?php esc_attr_e( 'Hex Value', 'Divi' ); ?>" value="<?php echo esc_attr( $post_bg_color ); ?>" data-default-color="#ffffff" />
</p>
<p class="et_divi_quote_settings et_divi_audio_settings et_divi_link_settings et_divi_format_setting">
<label for="et_post_bg_layout" style="font-weight: bold; margin-bottom: 5px;"><?php esc_html_e( 'Text Color', 'Divi' ); ?>: </label>
<select id="et_post_bg_layout" name="et_post_bg_layout">
<?php
foreach ( $layouts as $layout_name => $layout_title )
printf( '<option value="%s"%s>%s</option>',
esc_attr( $layout_name ),
selected( $layout_name, $post_bg_layout, false ),
esc_html( $layout_title )
);
?>
</select>
</p>
<?php endif;
if ( 'project' === $post->post_type ) : ?>
<p class="et_pb_page_settings et_pb_project_nav" style="display: none;">
<label for="et_project_nav" style="display: block; font-weight: bold; margin-bottom: 5px;"><?php esc_html_e( 'Project Navigation', 'Divi' ); ?>: </label>
<select id="et_project_nav" name="et_project_nav">
<option value="off" <?php selected( 'off', $project_nav ); ?>><?php esc_html_e( 'Hide', 'Divi' ); ?></option>
<option value="on" <?php selected( 'on', $project_nav ); ?>><?php esc_html_e( 'Show', 'Divi' ); ?></option>
</select>
</p>
<?php endif;
}
endif;
HOW TO RECALL THEME CUSTOMIZER OPTION VALUES
You should probably have noticed the changes about every ‘Select’ tag; however, in order to check the values saved in the Theme Customizer, we have to call these values before. We have saved these as options, so we have simply to recall them with a get_option() function (see lines 6-9 of the code above) as follows:
/* GET THE CUSTOMIZER OPTION VALUES */
$page_layout_opt = get_option( 'idivi_post_settings_sidebar' );
$dot_nav_opt = get_option( 'idivi_post_settings_dot' );
$before_scroll_opt = get_option( 'idivi_post_settings_before_scroll' );
$title_opt = get_option( 'idivi_post_settings_post_title' );
IT DOESN’T WORK. SURE, WE HAVE TO SAVE THE OPTIONS!
If you try to test your plugin now, you will see that it seems to work properly, it can be activated without issues, you can find ‘Divi Post Settings’ section under the Blog panel of Theme Customizer, you can also save your preferences and creating a new post you will see these ones already setted in the Divi Post Settings meta-box.
But you’re going to save a post and when you preview it you discover that your options have not been applied at all. The plugin simply doesn’t work!
Sure. We have done much of the work, but a last step is strictly required. we have to save the options!
Divi in his functions.php file do it in a function called ‘et_divi_post_settings_save_details‘ (at line 498); what we have to do is copy and paste this function too in your main plugin file.
However, this time it’s not sufficient to wrap the code in a ‘function_exists’ function; simply you can’t copy this function with the same name. So we have to change the prefix (either in the function name either in the add_action calling) ‘et_’ with what we want (in our case ‘idivi_’) and all is done!
if ( ! function_exists( 'idivi_divi_post_settings_save_details' ) ) :
function idivi_divi_post_settings_save_details( $post_id, $post ){
global $pagenow;
if ( 'post.php' !== $pagenow || ! $post || ! is_object( $post ) ) {
return;
}
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
return;
}
$post_type = get_post_type_object( $post->post_type );
if ( ! current_user_can( $post_type->cap->edit_post, $post_id ) ) {
return;
}
if ( ! isset( $_POST['et_settings_nonce'] ) || ! wp_verify_nonce( $_POST['et_settings_nonce'], basename( __FILE__ ) ) ) {
return;
}
if ( isset( $_POST['et_post_use_bg_color'] ) )
update_post_meta( $post_id, '_et_post_use_bg_color', true );
else
delete_post_meta( $post_id, '_et_post_use_bg_color' );
if ( isset( $_POST['et_post_bg_color'] ) )
update_post_meta( $post_id, '_et_post_bg_color', sanitize_text_field( $_POST['et_post_bg_color'] ) );
else
delete_post_meta( $post_id, '_et_post_bg_color' );
if ( isset( $_POST['et_post_bg_layout'] ) )
update_post_meta( $post_id, '_et_post_bg_layout', sanitize_text_field( $_POST['et_post_bg_layout'] ) );
else
delete_post_meta( $post_id, '_et_post_bg_layout' );
if ( isset( $_POST['et_single_title'] ) )
update_post_meta( $post_id, '_et_pb_show_title', sanitize_text_field( $_POST['et_single_title'] ) );
else
delete_post_meta( $post_id, '_et_pb_show_title' );
if ( isset( $_POST['et_pb_post_hide_nav'] ) )
update_post_meta( $post_id, '_et_pb_post_hide_nav', sanitize_text_field( $_POST['et_pb_post_hide_nav'] ) );
else
delete_post_meta( $post_id, '_et_pb_post_hide_nav' );
if ( isset( $_POST['et_project_nav'] ) )
update_post_meta( $post_id, '_et_pb_project_nav', sanitize_text_field( $_POST['et_project_nav'] ) );
else
delete_post_meta( $post_id, '_et_pb_project_nav' );
if ( isset( $_POST['et_pb_page_layout'] ) ) {
update_post_meta( $post_id, '_et_pb_page_layout', sanitize_text_field( $_POST['et_pb_page_layout'] ) );
} else {
delete_post_meta( $post_id, '_et_pb_page_layout' );
}
if ( isset( $_POST['et_pb_side_nav'] ) ) {
update_post_meta( $post_id, '_et_pb_side_nav', sanitize_text_field( $_POST['et_pb_side_nav'] ) );
} else {
delete_post_meta( $post_id, '_et_pb_side_nav' );
}
}
endif;
add_action( 'save_post', 'idivi_divi_post_settings_save_details', 10, 2 );
Now our plugin will save properly the options. Try yourself to believe!
LET’S FINISH IT….
A final series post attend we on next tuesday. We will finish the plugin, fix some minor issues and add some extra functionalities.
See you next post. Stay tuned!
