Adding Admin Elements in Themes

0 Comments/Pings WordPress Tutorials 2010.01.2

Not long after I started experimenting with WordPress themes, I wanted the “Edit post”, “Edit page”, “Edit comment” and “Site Admin” links in the same style as you can find those in the WordPress admin area. So I made those and I can tell you it makes live much easier. In this tutorial I explain how to install those in your own theme.

Please be aware: You need to have some knowledge of HTML and CSS. If you don’t have that, please don’t read any further. You could email me if you want me to integrate it for you.

The dark Admin Bar in the Admin Area.

The dark Admin Bar in the theme. It will show up when I or someone else is logged in.

When I am logged in and have the permissions to edit comments, this button will show up.

This will show up under the comment form.

1. Adding the CSS

Place this piece of code in the <head> within the <style> element. It will only load when someone is logged in. When the adminbuttons etc. don’t show up as they should, you may have to change the CSS slightly.

<?php if ( $user_ID )  >
 <?php endif

<?php if ( $user_ID ) : ?>

		/* Rich Admin CSS */

		/* ## Big Admin Bar at the top */

		.logged-in {
			padding:0; margin:0;
			height:46px;
			background:#464646 url(<?php echo get_option('home'); ?>/wp-admin/images/wp-logo.gif) no-repeat 16px 8px;
			color:#999;
		}

		.logged-in h1 {
        	margin:0; padding:10px 0 0 55px;
        	display:block;
			height:36px;
		}

	</style>

	<!--[if lt IE 8]>
	<style type="text/css" media="screen">
		.logged-in h1{
			height:44px;
			padding-top:2px;
		}
	</style>
	<![endif]-->

	<style type="text/css" media="screen">

		.logged-in h1 a  {
        	margin:0; padding:0;
        	color:#fff; font:22px Georgia,"Times New Roman","Bitstream Charter",Times,serif; font-weight:normal; text-decoration:none;
		}

		.logged-in h1 a em {
	        font-style:normal;
		}

		.logged-in h1 a:hover span {
	        text-decoration:underline;
		}

		.logged-in h1 a em {
			margin:0 0 0 11px; padding:2px 6px;
			vertical-align:middle;
			-moz-border-radius:3px; -webkit-border-radius:3px;
			background:#585858 url(<?php echo get_option('home'); ?>/wp-admin/images/visit-site-button-grad.gif) repeat-x;
	        font-size:50%; line-height:17px; color:#aaa;text-shadow:0 -1px 0 #3F3F3F;
		}

		.logged-in h1 a:hover em {
			color:#fff;
		}

		.logged-in p a, .comments_logged-in a {
			color:#ccc; font-weight:normal;
		}

		.logged-in p a:hover, .comments_logged-in a:hover {
			text-decoration:underline; color:#fff;
		}

		.logged-in p {
			margin:-46px 0 0 0; padding:16px 15px 0 0;
			text-align:right; font:12px "Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif;
		}

		/* ## Edit Page/Post Buttons */

		strong.edit a {
        	margin:-5px 0 0 0; padding:4px 10px;
        	cursor:pointer;
        	border-color:#bbb; border-style:solid; border-width:1px; -moz-border-radius:11px; -webkit-border-radius:11px;
			background:#f2f2f2 url(<?php echo get_option('home'); ?>/wp-admin/images/white-grad.png) repeat-x scroll left top;
            color:#464646; font-family:"Lucida Grande",Verdana,Arial,"Bitstream Vera Sans",sans-serif; font-size:11px !important; text-decoration:none; text-shadow:0 1px 0 #fff; line-height:2em; font-size-adjust:none; font-style:normal; font-variant:normal; font-weight:normal; text-decoration:none !important;
		}

		strong.edit a:hover {
	        border-color:#666;
			background:#f2f2f2 url(<?php echo get_option('home'); ?>/wp-admin/images/white-grad.png) repeat-x scroll left top;
	        color:#000;
		}

		/* // ## A logged in user doesn't have to fill in his/her name etc, so he/she'll see this form instead. */

		.comments_logged-in {
			margin:30px 0 0 0; padding:10px 10px 10px 15px;
			-moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
			background:#333; color:#999;
			font:12px "Lucida Grande","Lucida Sans Unicode",Tahoma,Verdana,sans-serif;
		}

		/* // Rich Admin CSS  */

	<?php endif; ?>

2. Add the dark Admin Bar

Add the code staight under the <body> tag. This bar will show up when someone is logged in.

<?php if ( $user_ID ) :

		global $userdata;
		get_currentuserinfo();
		?>

			<div class="logged-in">
				<h1>
					<a class="dashboard" href="<?php echo get_option('home'); ?>/wp-admin/"><span><?php bloginfo('name'); ?></span><em>Go to the Dashboard</em></a>
				</h1>
				<p>
					Howdy, <a href="<?php echo get_option('home'); ?>/wp-admin/profile.php"> <?php echo($userdata->user_login); ?></a> |
					<?php wp_loginout(); ?>
				</p>
			</div>
<?php endif; ?>

oke

3. Adding the “Edit this” buttons

Now replace the normal “Edit this” buttons you find at posts and pages with this piece of code. These buttons will only show up if the one logged in has the permissions to edit it, of course.

<?php edit_post_link(__('Edit This'), '<strong class="edit">', '</strong>'); ?>

Now replace the normal “Edit this” buttons you find in every comment with this piece of code.

<?php edit_comment_link(__('Edit Comment'), '<strong class="edit">', '</strong>'); ?>

4. Adding the “Logged in as….”

Replace the code within the <?php if ( is_user_logged_in() ) : ?> with this.

<p class="comments_logged-in"><?php printf(__('Logged in as %s.'), '<a href="'.get_option('siteurl').'/wp-admin/profile.php">'.$user_identity.'</a>'); ?> <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="<?php _e('Log out of this account') ?>"><?php _e('Log out &raquo;'); ?></a></p>

5. Enjoy!

You may have to specify some of the CSS we added in step 1 and it should work well!