Admin Bar is in vertical way

I should mention that my comment above was directed at the Plugin author and not the member I quoted … I just quoted because I agree with the member 100% CHEERS!

So, instead of complaining that the author is lazy or whatever (he doesn’t owe you anything, by the way), it would be more productive to tell him the name of the theme you’re using, so that he could at least be able to reproduce the problem.

I wasn’t insinuating that he did owe me anything. Just making a point that if you are kind enough to provide the plugin (which I highly respect) then you, in turn, take on a responsibility (morally) to provide proper support. Also, nowhere in his replies did I see him state that but I do thank you for making that clear. I did however find a fix (which was not my theme as I did try it in twentytwelve and had the same issue.)

Now that I have fixed it, I will be kind enough to share (sharing is caring after all). The CSS file protects itself by going inactive for edits so anything you do within WP plugin edits will not affect the plugin. You have to deactivate the plugin in WP, download the plugin PHP file and CSS file via FTP, edit the CSS to say display:inline; instead of display:block; and re-save. Then edit the PHP (optional) if you want to change the page that the register link goes to. I manage a paid member site so going to wp-admin was not the right page for me. Once both files are saved, upload them back to the plugin folder, overwrite existing then reactivate plugin in WP…

Cheers

Good day all,

I would just like to extend my personal thanks to the Plugin Author as this was exactly what I was looking for; however, I too had the same issue as the very first poster regarding the login form being vertical and not displaying inline on the bar. I eventually fixed that, but then I was wondering if I could alter the code to be a little more elegant (elegant in my personal bubble of course).

What I wanted was for the logged out user to be presented with the admin bar with a Login/Register drop down box (much like when you’re logged in and the bar displays “Howdy, User”). So I did some digging and found out that I could actually do this.

Below are pics of my results:
My AdminBar Result Pic 1
My AdminBar Result Pic 2

The following php and css is based on the authors original programming, all I did was tweak it.

Here is the code I placed in my themes functions.php

/*
 * Force Admin Bar for logged out users, add a login link, remove the wp logo, and add a custom link menu
 */
class force_admin_bar {
	/*
	 * Loads when class is called
	 */
	function __construct() {
		/* logged out users only */
		if ( is_user_logged_in() ) { return false; }
		/* force adminbar to logged out users */
		add_filter( 'show_admin_bar', '__return_true' );
		/* call function to add login link to admin bar */
		add_action( 'admin_bar_menu', array( &$this, 'logged_out_menus' ), 15 );
	}
	/*
	 * Menus for logged out users
	 */
	function logged_out_menus( $meta = FALSE ) {
		global $wp_admin_bar, $blog_id;
		/* form variables */
		$form = wp_login_form( array(
			'form_id' => 'adminloginform',
			'echo' => false,
			'value_remember' => false
		) );
		/* login-register parent menu */
		$wp_admin_bar->add_menu( array(
			'parent' => 'top-secondary',
			'id' => 'login_menu',
			'title' => __( 'Login ↔ Register' ),
			'href' => get_home_url( $blog_id, '/wp-login.php' )
		) );
		/* login form child menu */
		$wp_admin_bar->add_menu( array(
			'parent' => 'login_menu',
			'id' => 'login',
			'title' => $form
		) );
	}
}
/* Call Class */
$force_admin_bar = new force_admin_bar();

/* Register and Lost password links to add to login form */
function add_lost_password_register_link() {
	return '<a id="register-link" href="/wp-login.php?action=register">Register</a><a id="lostpassword-link" href="/wp-login.php?action=lostpassword">Lost your password?</a>';
}
add_action( 'login_form_bottom', 'add_lost_password_register_link' );

The CSS with minor tweaks:

/* Logged Out User Admin Bar */
div.ab-item.ab-empty-item {
	height: 100% !important;
}
#lostpassword-link {
	line-height: 0.8em;
}
#adminloginform .login-username label:hover,
#adminloginform .login-password label:hover,
#adminloginform .login-remember label:hover {
	color: #3197cc;
}
#adminloginform .login-username input,
#adminloginform .login-password input {
	font: 13px/24px sans-serif;
	padding:0 4px 0 4px;
	height: 24px;
	line-height: 20px;
	border: none;
	color: #555;
	text-shadow: 0 1px 0 #fff;
	background-color: rgba( 255, 255, 255, 0.9 );
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
#adminloginform #wp-submit {
	text-decoration: none;
	font-size: 13px;
	line-height: 26px;
	height: 28px;
	margin: 0 0 2px 0;
	padding: 0 10px 1px;
	cursor: pointer;
	border-width: 1px;
	border-style: solid;
	-webkit-border-radius: 3px;
	-webkit-appearance: none;
	border-radius: 3px;
	white-space: nowrap;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: #2ea2cc;
	border-color: #0074a2;
	-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.5), 0 1px 0 rgba(0,0,0,.15);
	box-shadow: inset 0 1px 0 rgba(120,200,230,0.5), 0 1px 0 rgba(0,0,0,.15);
	color: #fff;
	text-decoration: none;
}
#adminloginform #wp-submit:active {
	background: #1e8cbe;
	border-color: #005684;
	color: rgba(255,255,255,0.95);
	-webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
	box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
}
#adminloginform #wp-submit:hover {
	background: #1e8cbe;
	border-color: #0074a2;
	-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
	box-shadow: inset 0 1px 0 rgba(120,200,230,0.6);
	color: #fff;
}

I hope the author would like to incorporate this in to the plugin because I have no idea how to make one :).

Cheers,