Display two columns on admin page

  • Resolved David Gard

    (@duck_boy)


    14 years, 5 months ago

    Hey all,

    I’m trying to sort a page out in the backend so that it displys two colums, both at half the size of the screen. I found the example below, but that styles the page as if it is the Post editor, which is no good for me. Anybody know how I can achieve this at all?

    add_filter('screen_layout_columns', array(&$this, 'set_custom_branding_screen_layout'), 10, 2);
function set_custom_branding_screen_layout($columns, $screen) {
	if ($screen === $this->pagehook){
		$columns[$this->pagehook] = 2;
	}
	return $columns;
}

    Thanks.

Viewing 7 replies - 1 through 7 (of 7 total)

  • The example below? I don’t see one.. ??

    I’d imagine you divide the space into two sections in the same way you would any HTML page, what exactly do you need help doing? Writing the HTML and CSS to do it?

    Thread Starter David Gard

    (@duck_boy)

    You must have caught the post quickly – I added the code as soon as I’d posted the original question!!

    Basically, I’m adding a plugin that has several meta-boxes, so i wanted to give the user the ability to move/hide the boxes. I found a tutorial and can now do that, but where as before I could manually code that the boxes should have a width of 49%, I can no longer do that.

    The tutorial offered the above code as a way of having two columns, but they are sized to match the Post editor screen, as opposed to the Dashboard, which is what I am after.

    I’m wondering if you know how to achieve that layout using the method above?

    Thanks.

    You probably need to change this line and apply a different class..

    <div id="poststuff" class="metabox-holder<?php echo 2 == $screen_layout_columns ? ' has-right-sidebar' : ''; ?>">

    has-right-sidebar is a WordPress class with a set width, which is likely not suited to what you’re aiming for.. change the class, and add your own CSS to apply the width..

    Same might need to be done for the child element with that class..

    Hard to say without installing it again, but i’d guess one of the classes being applied in the code is setting undesired widths (got firebug? should be easy to check).

    Thread Starter David Gard

    (@duck_boy)

    Hmm, not sure I can change that line. I will have a look over the weekend and see what I come up with.

    Thanks for the input thus far.

    It’s a line straight out of the plugin you’re using as an example to work from, so you certainly can change it…

    Moreover though, the main point i was trying to make above, is that the issue likely lies with one of the IDs or classes being applied by one of the WordPress stylesheets.

    If you get stuck, post your complete code into a pastebin and report the link back here, i’ll do what i can to help..

    Thread Starter David Gard

    (@duck_boy)

    oh, sorry, miss-read your post – I see it now!

    Thread Starter David Gard

    (@duck_boy)

    Excellent, don’t even need the weekend. Managed to suss out how they did it in wp-admin/includes/dashboard.php after you pointed me in the right direction. Final code for a maximum 3 column layout –

    global $screen_layout_columns;
$hide2 = $hide3 = '';
	switch ( $screen_layout_columns ) {
		case 3:
			$width = 'width:32.67%;';
			break;
		case 2:
			$width = 'width:49%;';
			$hide3 = 'display:none;';
			break;
		default:
			$width = 'width:98%;';
			$hide2 = $hide3 = 'display:none;';
	}
<div id="custom-branding-general" class="wrap">
<?php screen_icon('options-general'); ?>
<h2>Metabox Showcase Plugin Page</h2>
<form action="admin-post.php" method="post">
	<?php wp_nonce_field('custom-branding-general'); ?>
	<?php wp_nonce_field('closedpostboxes', 'closedpostboxesnonce', false ); ?>
	<?php wp_nonce_field('meta-box-order', 'meta-box-order-nonce', false ); ?>
	<input type="hidden" name="action" value="save_custom_branding" />

	<div id="custom-branding-page" class="metabox-holder">

		<div id="dashboard-widgets" class="metabox-holder">
		<?php
			echo "\t<div class='postbox-container' style='$width'>\n";
			do_meta_boxes($this->pagehook, 'normal', $data);
			echo "\t</div><div class='postbox-container' style='{$hide2}$width'>\n";
			do_meta_boxes($this->pagehook, 'side', $data);
			echo "\t</div><div class='postbox-container' style='{$hide3}$width'>\n";
			do_meta_boxes($this->pagehook, 'additional', $data);
		?>
		</div>
		<br class="clear"/>

	</div>
</form>
</div>

    Thanks for the help.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Display two columns on admin page’ is closed to new replies.