NOONnoo by Melle Wynia » WordPress Tutorials http://www.noonnoo.com Fri, 19 Feb 2010 23:26:45 +0000 http://wordpress.org/?v=2.8.6 en hourly 1 Adding Admin Elements in Themes http://www.noonnoo.com/wordpress-tutorial/adding-admin-elements-in-themes/ http://www.noonnoo.com/wordpress-tutorial/adding-admin-elements-in-themes/#comments Sat, 02 Jan 2010 17:00:57 +0000 Melle http://www.noonnoo.com/?p=219 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 Admin Area.

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

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.

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.

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!

]]> http://www.noonnoo.com/wordpress-tutorial/adding-admin-elements-in-themes/feed/ 1 Install WordPress using MAMP (localhost) on a MAC http://www.noonnoo.com/wordpress-tutorial/install-wordpress-in-on-your-localhost-using-mamp-on-a-mac/ http://www.noonnoo.com/wordpress-tutorial/install-wordpress-in-on-your-localhost-using-mamp-on-a-mac/#comments Thu, 23 Jul 2009 15:39:23 +0000 Melle http://www.noonnoo.com/wordpress/?p=70 It is not hard to install WordPress locally on your MAC, you’ll probably have this done within 10 minutes if you follow this tutorial. Following on this tutorial, I will write a tutorial on how to access your WordPress installation installed via MAMP on your MAC in a virtual machine for cross browser testing. I’ll refer to this tutorial.

Step 1: Download MAMP

Download and install the free version of MAMP.

Step 2: Set MAMP preferences

If you fire up MAMP, go to Preferences > to the tab Ports and click on “Set to default Apache and MySQL posts”. After you did this go to http://localhost/ and a directory page should show up unless you have something installed in htdocs.

This step is very important, otherwise, WordPress won’t work in your virtualmachine.

MAMP which is just fired up

MAMP > Preferences

Step 3: Checking the address of your MAC

Go to System Preferences > Network > Airport when using a wireless metwork or if you’re not connected to a wireless network to System Preferences > Network > Ethernet. You’ll find your local ip-address there. Copy it. Yes, I know, my installation of MAC is Dutch (not German!), but that doesn’t matter. Now quit and start MAMP. Open your browser and go to this address, in my case http://192.168.178.32/.

Airport connection

Step 4: Install WordPress in MAMP

Download WordPress. Unzip the file. You have a folder WordPress now. Fire up the Finder and go to Applications > MAMP > htdocs and paste the folder WordPress to htdocs. Now go to the localaddress you found in Step 3, in my case: http://192.168.178.32/wordpress/. http://localhost/wordpress/ should work too, but if you want to access your WordPress installation in a virtualmachine too, you have to go to http://192.168.178.32/wordpress/. Click on “Create a Configuration File”.

WordPress fired up for the first time

Click than on “Let’s go!”.

The "Let's go!" button.

Now you have to fill in your database information, but before you can do that, you have to make a database. Go to the main window of MAMP and click on “Open start page”. It will open a new tab in your browser.

MAMP which is just fired up

You can see the Host, the User and Password now. You’ll need them after we finished You can see on this page your Than click on ‘PhpMyAdmin’. Click on the image below for the reallife sized version.

MAMP Home

Now create a new database called “WordPress”. Click on the image below for a reallife sized version.

Creating a new database.

After you did this, go to the tab where you are trying to install WordPress and change the following information and click on submit:

  • Database Name: WordPress
  • User Name: root
  • Password: root

The information.

Step 4: Enjoy your WordPress installation!

Now you installed WordPress! You have to run the setup, but that won’t probably be a problem.

Following on this tutorial, I will write a tutorial on how to access your WordPress installation installed via MAMP on your MAC in a virtual machine for cross browser testing. I’ll refer to this tutorial.

]]> http://www.noonnoo.com/wordpress-tutorial/install-wordpress-in-on-your-localhost-using-mamp-on-a-mac/feed/ 2