Frumph.NETWork

One of the new features of my Easel theme is the configuration of each individual page to display sidebars or not.    This is useful for example if you’re using plugins (or your page) that require a a larger area to display the content in.   The Chat and Forum pages on this site  are good representations of this.

The usage of this code will allow people to not be ‘confined’ to their workspace of a normal column width.

To start with, let’s look at the function used to determine if the setting is set on the page.   This is using a meta-field (custom field) in the page editor to store the information for the page.

function easel_sidebars_disabled() {
	global $post;
	if (is_page()) {
		$sidebars_disabled = get_post_meta($post->ID, 'disable-sidebars', true);
		if ($sidebars_disabled) return true;
	}
	return false;
}

What this function is doing is grabbing the disable-sidebar post meta for that page, if it exists it will return true for the function, otherwise false.

Then the part where the code itself utilizes it to determine the column width for the content. Most column widths are static at a specific css width, with ComicPress and Easel I use narrowcolumn to determine the content column, however that’s not going to work to just to force it wider on the pages.

So what I am doing is flipping the css element itself to a different name based on the option.

		<?php if (easel_is_signup() || easel_sidebars_disabled()) { ?>
			<div id="column" class="widecolumn">
		<?php } else { ?>
<?php
if (!easel_is_signup() && !easel_sidebars_disabled()) {
		if (easel_themeinfo('layout') != 'b3cr') get_sidebar('left');
		if (easel_themeinfo('layout') == 'b3cl') get_sidebar('right');
}
?>
			<div id="column" class="narrowcolumn">
		<?php } ?>

As seen above the if (easel_sidebars_disabled()) will return true and set the column area to ‘.widecolumn’ instead of ‘.narrowcolumn’ this lets us specify different widths available in CSS without doing any dynamic junk with creating new stylesheet loads.

UPDATE: Tonight I actually made it easier and made an addition to my body_class() filter where in the body class=”" it adds a “wide” element to it, so that I can do body.wide .narrowcolumn {} and change the width with CSS instead of any switching of element names.

You may have just noticed the easel_is_signup() function call up there, with WPMS – WordPress Multisite, there’s no clear define or function to tell whether or not someone is on the signup page. .. The signup page itself is *not* made for a small column so I also made that check to push to a wider column for the signup page.

function easel_is_signup() {
	if (strpos( $_SERVER['SCRIPT_NAME'], 'wp-signup.php' ) || strpos( $_SERVER['SCRIPT_NAME'], 'wp-activate.php' )) return true;
	return false;
}

With Easel and ComicPress, I use this “if it’s not used, dont parse it” attitude. Which means that this whole functionality isn’t used unless the php file is called. So in the options for the theme there’s a checkbox whether or not to use this feature, if it is used then it will load the php for it. Here’s the rest of the functionality of this feature.

<?php
// page options - extra page options for easel, shown in a meta box in the page editor

function easel_page_editor_options($post) {
?>
<div class="inside" style="overflow: hidden">
	<?php
		wp_nonce_field( 'easel_post_options-'.$post->ID, 'easel-update-page-options' );
		$disable_sidebars = get_post_meta($post->ID, 'disable-sidebars', true);
	?>
	<table>
		<td valign="top">
			<input id="easel_sidebar_remove" name="easel_sidebar_remove" type="checkbox" value="1"<?php echo $disable_sidebars ? ' checked="checked"' : ''; ?> /> Disable Sidebars
		</td>
	</tr>
	</table>
</div>
<?php
}
add_action('add_meta_boxes', 'easel_add_page_editor_meta_box');

function easel_add_page_editor_meta_box() {
	add_meta_box('easel-page-options', __('Easel Page Options', 'easel'), 'easel_page_editor_options', 'page', 'side', 'high');
}

function easel_save_page_editor_options($post_id) {
	if (isset($_POST['easel-update-page-options']) && !wp_verify_nonce( $_POST['easel-update-page-options'], 'easel_post_options-'.$post_id )) {
		return $post_id;
	}
	if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE )
		return $post_id;
	if ( $_POST['post_type'] == 'page' ) {
		if ( !current_user_can( 'edit_page', $post_id ) )
			return $post_id;
	} else {
		if ( !current_user_can( 'edit_post', $post_id ) )
			return $post_id;
	}

	if (isset($_POST['easel_sidebar_remove'])) {
		update_post_meta($post_id, 'disable-sidebars', '1');
	} else {
		delete_post_meta($post_id, 'disable-sidebars');
	}
	return $post_id;
}
add_action('save_post', 'easel_save_page_editor_options');

?>

Add’s a meta box to the page editor screen with checkbox inside of it, has a save that option routine with the proper _nonce check code to make sure it’s secure from outside attempts at hacking. Also I made sure that if it’s disabled for that page that the post_meta itself is deleted so that it’s not taking up space in the database just saying off or 0.

This feature will be available in Easel 2.0 when it comes out and ComicPress (when I get to it).

- Phil