Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

December 12 2011

21:30

Build an Admin Panel with the Fuel PHP Framework

In the first part of this series, we took a look at the basics of the FuelPHP framework. In this second-part, we’ll be stepping it up a gear and move onto some more advanced topics! We’ll be creating an admin panel for our application, cover the common uses of the ORM and use the Authentication package to restrict access.

Join me after the break to get started!


Introduction

Since the first article Fuel has been renamed to FuelPHP. Also unlike the first article which was based on v1.0.1 this article requires v1.1.0 so a few little things are different. All the theory you have learnt from the first article is still accurate and not much has changed so this should be easy.


Step 1 - Set Up Oil

If you have not already installed the command-line utility oil and are lucky enough to be running on Linux, Mac, Solaris, etc then do so with the following command:

$ curl get.fuelphp.com/oil | sh

Step 2 - Create a New App

The oil command will help you create new projects with a few key-strokes and alias php oil when inside your FuelPHP applications:

$ oil create Sites/blog
$ cd Sites/blog

This will set up a blog application for us and assuming you have Apache or some other web server running on your “Sites” folder you should be able to load the following URL and see the welcome page.

alt text

Now that FuelPHP is alive and your web server is clearly working, we can start configuring our app.


Step 3 - Configuring Your App

Open up your favourite editor and we’ll start by setting up a database connection and configure the application. This is almost identical to v1.0.x, so create a database and set up your SQL users however you normally do. When it comes to database config there are two differences:

  • PDO is now the default driver
  • FuelPHP v1.1 has environment-based config folders now.

These changes are pretty simple, but you can swap back to using the native MySQL driver if you like. PDO is more useful for developers as it means that your application will work with just about any database engine not just the few that had specific FuelPHP drivers built for them. That means this could just as easily be SQLite or PostgreSQL.

Just open up fuel/app/config/development/db.php and modify your config, where dbname=blog is whatever your database is called and your own username and password for the database server:

return array(
  'default' => array(
 	 'connection'  => array(
 		 'dsn'  	=> 'mysql:host=localhost;dbname=blog',
 		 'username' => 'root',
 		 'password' => 'password',
 	 ),
  ),
);

Next you will just need to open fuel/app/config/config.php and enable the auth and orm packages as suggested in the first post.

/**************************************************************************/
/* Always Load                    */
/**************************************************************************/
'always_load'  => array(

	'packages'  => array(
		'auth',
'orm',
	),

In this config file, we need to make one small change to the whitelisted_classes array which will allow us to pass validation objects to the view:

	'whitelisted_classes' => array(
		'Fuel\Core\Response',
		'Fuel\Core\View',
		'Fuel\Core\ViewModel',
		'FuelCoreValidation',
		'Closure',
	),

Setting up Groups

The auth package included with FuelPHP is driver based and by default we are using “SimpleAuth” which is the only driver included in the package. When you are more experienced with FuelPHP, you can start to create custom drivers to integrate with other users’ systems – such as third-party forums, content management systems, etc.

To enable groups for SimpleAuth, we simply open up fuel/packages/auth/config/simpleauth.php and set groups to the following:

return array(
  'groups' => array(
 	  -1 => array('name' => 'Banned', 'roles' => array('banned')),
 	  0	=> array('name' => 'Guests', 'roles' => array()),
 	  1	=> array('name' => 'Users', 'roles' => array('user')),
 	  50 => array('name' => 'Moderators', 'roles' => array('user', 'moderator')),
 	  100  => array('name' => 'Administrators', 'roles' => array('user', 'moderator', 'admin')),
  ),
);

These could, of course, be anything, but are pretty standard for most apps and will work for this tutorial.


Step 4 - Creating Users

As we are building an admin panel, we need to create the users table and then populate it with a user record who will be the first administrator. We could use something like phpMyAdmin or a GUI like Navicat, but it’s better to do things via Oil so we stay within our codebase. This means password hashing is salted correctly with whatever driver is being used – and is how we’ll be doing it:

$ oil generate model users username:varchar[50] password:string group:int email:string last_login:int login_hash:string profile_fields:text
  Creating model: /Users/phil/Sites/blog/fuel/app/classes/model/user.php
  Creating migration: /Users/phil/Sites/blog/fuel/app/migrations/001_create_users.php
$ oil refine migrate

This creates a user model for us and creates another migration that will build our user table when the oil refine migrate task is run. Next we have to create an Administrator user, which, again, we could do via a GUI but where’s the fun in that?

$ oil console
Fuel 1.1-rc1 - PHP 5.3.6 (cli) (Sep  8 2011 19:31:33) [Darwin]
>>> Auth::create_user('admin', 'password', 'phil@example.com', 100);
1
-- Ctrl + C to exit

We’ve used the Oil Console to write code in real-time and get a response. Auth::create_user() was passed a username, password, email address and the group_id for admins, which for now we’ll just use 100 – which we set in the config. The 1 is a response from the code, which means user_id has a value of 1.


Step 5 - Code Generation

Generators are a great way to build a bunch of code from scratch and getting a running start.

As explained in the first article we can use scaffolding to build large chunks of an application quickly. This is done through the oil command and is all very optional, but it is a great way to build a bunch of code from scratch. Some people look at code generation as “tools for people who don’t know how to code” or think its some kind of black magic, but if you are new to a framework and do not want to have to learn how to put everything together then having a system make code for you is not such a bad thing.

FuelPHP v1.1 takes the code generation one small step further. Instead of just creating scaffolding (unprotected CRUD) you can now generate Admin code. This works in exactly the same way but implements a simple admin template, admin controller, etc and uses the auth package to lock down your generated code. Taking advantage of the Twitter Bootstrap, this all looks good enough to use and with only a bit of tweaking you’ll have an app that you can ship.

This is done via the command line using the oil command. We’ll generate some code then walk through it.

$ oil generate admin posts title:string slug:string summary:text body:text user_id:int
	Creating controller: /Users/phil/Sites/blog/fuel/app/classes/controller/base.php
	Creating controller: /Users/phil/Sites/blog/fuel/app/classes/controller/admin.php
	Creating views: /Users/phil/Sites/blog/fuel/app/views/admin/template.php
	Creating views: /Users/phil/Sites/blog/fuel/app/views/admin/dashboard.php
	Creating views: /Users/phil/Sites/blog/fuel/app/views/admin/login.php
	Creating migration: /Users/phil/Sites/blog/fuel/app/migrations/002_create_posts.php
	Creating model: /Users/phil/Sites/blog/fuel/app/classes/model/post.php
	Creating controller: /Users/phil/Sites/blog/fuel/app/classes/controller/admin/posts.php
	Creating view: /Users/phil/Sites/blog/fuel/app/views/admin/posts/index.php
	Creating view: /Users/phil/Sites/blog/fuel/app/views/admin/posts/view.php
	Creating view: /Users/phil/Sites/blog/fuel/app/views/admin/posts/create.php
	Creating view: /Users/phil/Sites/blog/fuel/app/views/admin/posts/edit.php
	Creating view: /Users/phil/Sites/blog/fuel/app/views/admin/posts/_form.php
	Creating view: /Users/phil/Sites/blog/fuel/app/views/template.php

This is quite a bit of code because it is the first time it has been run. FuelPHP will set up a few basic templates and files, then build the MVC components for the posts section. Remember, this is just like writing the code yourself, but quicker. You can take a look at this output by going to /blog/public/admin/posts:

Posts - Admin Generated code

Understanding Controllers

We’ve added a Controller_Base which will contain logic for your entire app, so every controller can extend from this. The file simply contains:

abstract class Controller_Base extends Controller_Template {

	public function before()
	{
		parent::before();

		// Assign current_user to the instance so controllers can use it
		$this->current_user = Auth::check() ? Model_User::find(Arr::get(Auth::get_user_id(), 1)) : null;

		// Set a global variable so views can use it
		View::set_global('current_user', $this->current_user);
	}

}

By extending Controller_Template, all views will be wrapped by a template automatically. Then in the before() function we do a little bit of logic to get the current user and make it available as $this->current_user in controllers and $current_user in views.

Another controller will be built called Controller_Admin which extends Controller_Base, so as well as having the current user being built we can check to see if a user is actually an admin:

abstract class Controller_Admin extends Controller_Base {

	public $template = 'admin/template';

	public function before()
	{
		parent::before();

		if ( ! Auth::member(100) and Request::active()->action != 'login')
		{
			Response::redirect('admin/login');
		}
	}

	// ....

}

You’ll notice that this controller sets a custom template so instead of looking for fuel/app/views/template.php, it will look for fuel/app/views/admin/template.php. Then if a user does not match member(100) – the admin group ID set earlier – they will be sent off the the login page.

Extending Controllers

One very handy feature that FuelPHP has is to allow you to extend other controllers. Normally they are just loaded directly by the Request class after being routed to by the URL, but sometimes it is useful to extend controllers to share logic or methods. In this case, we are already checking permissions in Controller_Admin so we can extend that controller to reuse this logic.

Controller_Admin_Posts extends Controller_Admin. This means it contains the same before() check and therefore is protected in the same way as any other controller in your admin panel.

Now What?

Code generation is basically just the first step in working on an application. We still need to tweak our forms and create a frontend. For example, if you go to create or edit a post it will show the user_id field as a text box.


Step 6 - Updating the CRUD Forms

We’re going to want to modify our action_create() method in fuel/app/classes/admin/posts.php so we have a list of users available. To do this we can replace the method with this code:

public function action_create($id = null)
{
	$view = View::forge('admin/posts/create');

	if (Input::method() == 'POST')
	{
		$post = Model_Post::forge(array(
			'title' => Input::post('title'),
			'slug' => Inflector::friendly_title(Input::post('title'), '-', true),
			'summary' => Input::post('summary'),
			'body' => Input::post('body'),
			'user_id' => Input::post('user_id'),
		));

		if ($post and $post->save())
		{
			Session::set_flash('success', 'Added post #'.$post->id.'.');
			Response::redirect('admin/posts');
		}

		else
		{
			Session::set_flash('error', 'Could not save post.');
		}
	}

	// Set some data
	$view->set_global('users', Arr::assoc_to_keyval(Model_User::find('all'), 'id', 'username'));

	$this->template->title = "Create Post";
	$this->template->content = $view;
}

This is the same as the code before with two changes:

$view = View::forge('admin/posts/create');

This creates a new View object. We can assign properties to this view by setting them as properties, so our users data can be passed easily and would normally work a little like this:

$view->users = array(1 => "User 1", 2 => "User 2");

Now we make a similar update to action_edit():

public function action_edit($id = null)
{
	$view = View::forge('admin/posts/edit');

	$post = Model_Post::find($id);

	if (Input::method() == 'POST')
	{
		$post->title = Input::post('title');
		$post->slug = Inflector::friendly_title(Input::post('title'), '-', true);
		$post->summary = Input::post('summary');
		$post->body = Input::post('body');
		$post->user_id = Input::post('user_id');

		if ($post->save())
		{
			Session::set_flash('success', 'Updated post #' . $id);
			Response::redirect('admin/posts');
		}

		else
		{
			Session::set_flash('error', 'Could not update post #' . $id);
		}
	}

	else
	{
		$this->template->set_global('post', $post, false);
	}

	// Set some data
	$view->set_global('users', Arr::assoc_to_keyval(Model_User::find('all'), 'id', 'username'));

	$this->template->title = "Edit Post";
	$this->template->content = $view;
}

However, because the create.php and edit.php views share a theme partial _form.php, and properties only set variables to that one specific view we need to use the View::set_global() method:

$view->set_global('users', Arr::assoc_to_keyval(Model_User::find('all'), 'id', 'username'));

This uses the Model_User object to get all of our users, then flattens them to an associative array for our form.

The HTML now needs to change, so delete the div wrapping “slug” – we’ll do that ourselves and change the user_id field from being a input box to a select box:

<div class="clearfix">
	<?php echo Form::label('User', 'user_id'); ?>

	<div class="input">
		<?php echo Form::select('user_id', Input::post('user_id', isset($post) ? $post->user_id : $current_user->id), $users, array('class' => 'span6')); ?>

	</div>
</div>
User dropdown form

This will set the box to show all users and default to the current logged in user if none are provided. That is the only tweak we need to make at this point, so let’s make a frontend!

The Frontend

Creating a basic blog frontend is really simple so won’t worry about using code generation.

Create a new controller fuel/app/classes/controller/blog.php:

class Controller_Blog extends Controller_Base
{
	public function action_index()
	{
		$view = View::forge('blog/index');

		$view->posts = Model_Post::find('all');

		$this->template->title = 'My Blog about Stuff';
		$this->template->content = $view;
	}
}

And the fuel/app/views/blog/index.php view file:

<h2>Recent Posts</h2>

<?php foreach ($posts as $post): ?>

	<h3><?php echo Html::anchor('blog/view/'.$post->slug, $post->title) ?></h3>

	<p><?php echo $post->summary ?></p>

<?php endforeach; ?>

This is just a simple loop through the $posts array which contains all your articles.

Comment form

A foreach loop, a hyperlink and a summary is all we need on this view file and we’ll make another view file to actually see the post. We’ll call this controller method action_view() and make a view file called view.php:

<h2><?php echo $post->title ?></h2>

<p><strong>Posted: </strong><?php echo date('nS F, Y', $post->created_at) ?> (<?php echo Date::time_ago($post->created_at)?>)</p>

<p><?php echo nl2br($post->body) ?></p>

This is the method for the blog controller:

public function action_view($slug)
{
	$post = Model_Post::find_by_slug($slug);

	$this->template->title = $post->title;
	$this->template->content = View::forge('blog/view', array(
		'post' => $post,
	));
}

The find_by_slug() method is a “magic method” that will build WHERE slug = "foo" in your query and return a single Model_Post instance with that data.

Comment form

Now people can look at your – horribly unstyled – website and see a basic blog, and you have an admin interface to manage it!


Step 7 - Using the ORM

So far we’ve been using the ORM for our models to do basic CRUD but we’ve not yet seen anything to do with relationships. The ORM makes this incredibly easy as, well it stands for “Object Relational Mapping” for a reason. To set up relationships all we need to do is modify our models a little bit to explain how the ORM should relate the data.

A post is created by one user, so we say it “belongs to” a user. In Model_Post we can add:

protected static $_belongs_to = array('user');

The user can post multiple blogs, so we add this line:

protected static $_has_many = array('posts');

A quick way to test this works is by firing up the oil console:

Fuel 1.1-rc2 - PHP 5.3.6 (cli) (Sep  8 2011 19:31:33) [Darwin]
>>> $post = Model_Post::find('first');
>>> $post->user->username
admin
-- Ctrl + C to exit

Nice, the relationships work!

Now in the view we can work with $post->user and output their name, so let’s change fuel/app/views/blog/view.php:

<h2><?php echo $post->title ?></h2>

<p>
	<strong>Posted: </strong><?php echo date('nS F, Y', $post->created_at) ?> (<?php echo Date::time_ago($post->created_at)?>)
	by <?php echo $post->user->username ?>
</p>

<p><?php echo nl2br($post->body) ?></p>

Doing things this way is called lazy loading. What basically happens is that when you ask for $post->user the ORM returns the user object based on the contents of the user_id field. This means to get the post and the first user is two queries, getting the second will be a third, etc and so it can end up being very slow with all these additional queries.

To improve performance you can switch from lazy loading to eager loading which basically tells the ORM you are going to be joining users on so it should do it as part of the first query. This can make for one larger query but the ORM will slice it up nicely for you and you wont notice the difference.

$post = Model_Post::find_by_slug($slug, array('related' => array('user')));

If you look at the query the ORM produces, it will be something like this:

SELECT <code>t0</code>.<code>id</code> AS <code>t0_c0</code>, <code>t0</code>.<code>title</code> AS <code>t0_c1</code>, <code>t0</code>.<code>slug</code> AS <code>t0_c2</code>, <code>t0</code>.<code>summary</code> AS <code>t0_c3</code>, <code>t0</code>.<code>body</code> AS <code>t0_c4</code>, <code>t0</code>.<code>user_id</code> AS <code>t0_c5</code>, <code>t0</code>.<code>created_at</code> AS <code>t0_c6</code>, <code>t0</code>.<code>updated_at</code> AS <code>t0_c7</code>, <code>t1</code>.<code>id</code> AS <code>t1_c0</code>, <code>t1</code>.<code>username</code> AS <code>t1_c1</code>, <code>t1</code>.<code>password</code> AS <code>t1_c2</code>, <code>t1</code>.<code>group</code> AS <code>t1_c3</code>, <code>t1</code>.<code>email</code> AS <code>t1_c4</code>, <code>t1</code>.<code>last_login</code> AS <code>t1_c5</code>, <code>t1</code>.<code>login_hash</code> AS <code>t1_c6</code>, <code>t1</code>.<code>profile_fields</code> AS <code>t1_c7</code>, <code>t1</code>.<code>created_at</code> AS <code>t1_c8</code>, <code>t1</code>.<code>updated_at</code> AS <code>t1_c9</code> FROM (SELECT <code>t0</code>.<code>id</code>, <code>t0</code>.<code>title</code>, <code>t0</code>.<code>slug</code>, <code>t0</code>.<code>summary</code>, <code>t0</code>.<code>body</code>, <code>t0</code>.<code>user_id</code>, <code>t0</code>.<code>created_at</code>, <code>t0</code>.<code>updated_at</code> FROM <code>posts</code> AS <code>t0</code> ORDER BY <code>t0</code>.<code>id</code> ASC LIMIT 1) AS <code>t0</code> LEFT JOIN <code>users</code> AS <code>t1</code> ON (<code>t0</code>.<code>user_id</code> = <code>t1</code>.<code>id</code>) WHERE (<code>t0</code>.<code>slug</code> = 'women-love-guys-who-use-fuelphp') ORDER BY <code>t0</code>.<code>id</code> ASC

At first this might look insane, but the ORM knows exactly what is going on. Using this approach in the past I have reduced a application from running 300+ queries on a busy page (very slow) down to about 2 (very fast).


Step 8 - Adding Comments

Lots of “make a blog” tutorials stop before they get to comments which I think is a major under-sight. Every blog needs comments and we want to add them quickly so we can go and do something more fun, so we can use code generation to build the admin interface:

$ oil generate admin comments name:string email:string website:string message:text post_id:int
	Creating migration: /Users/phil/Sites/blog/fuel/app/migrations/003_create_comments.php
	Creating model: /Users/phil/Sites/blog/fuel/app/classes/model/comment.php
	Creating controller: /Users/phil/Sites/blog/fuel/app/classes/controller/admin/comments.php
	Creating view: /Users/phil/Sites/blog/fuel/app/views/admin/comments/index.php
	Creating view: /Users/phil/Sites/blog/fuel/app/views/admin/comments/view.php
	Creating view: /Users/phil/Sites/blog/fuel/app/views/admin/comments/create.php
	Creating view: /Users/phil/Sites/blog/fuel/app/views/admin/comments/edit.php
	Creating view: /Users/phil/Sites/blog/fuel/app/views/admin/comments/_form.php

$ oil refine migrate
Migrated app:default to latest version: 3.

Comments will need some similar tweaks as Post did so make those then we set up the relationships.

Model_User

protected static $_has_many = array('posts', 'comments');
protected static $_belongs_to = array('user');

Model_Post

protected static $_belongs_to = array('user');
protected static $_has_many = array('comments');

Model_Comment

protected static $_belongs_to = array('post', 'user');

Add a comment through the interface the cheating way, by going to http://localhost/blog/public/admin/comments/create and entering one

Comment admin

Now we can test the relationship in the console again:

Fuel 1.1-rc2 - PHP 5.3.6 (cli) (Sep  8 2011 19:31:33) [Darwin]
>>> Model_Post::find(1)->comments
array (
  1 =>
  Model_Comment::__set_state(array(
   '_is_new' => false,
   '_frozen' => false,
   '_data' =>
  array (
  'id' => '1',
  'name' => 'Phil Sturgeon',
  'email' => 'email@philsturgeon.co.uk',
  'website' => 'http://philsturgeon.co.uk/',
  'message' => 'This is an epic article.',
  'post_id' => '1',
  'created_at' => '1322931744',
  'updated_at' => '1322931744',
  ),
   '_original' =>
  array (
  'id' => '1',
  'name' => 'Phil Sturgeon',
  'email' => 'email@philsturgeon.co.uk',
  'website' => 'http://philsturgeon.co.uk/',
  'message' => 'This is an epic article.',
  'post_id' => '1',
  'created_at' => '1322931744',
  'updated_at' => '1322931744',
  ),
   '_data_relations' =>
  array (
  ),
   '_original_relations' =>
  array (
  ),
   '_view' => NULL,
   '_iterable' =>
  array (
  ),
  )),
)

Output of an array of ORM objects is a little verbose, but at least we can see the data. This means the relationship is working nicely, so let’s modify the ORM query in the blog controllers action_view() method to include comments:

$post = Model_Post::find_by_slug($slug, array('related' => array('user', 'comments')));

Now update the blog view to output the comments and have a form to add more:

<h2><?php echo $post->title ?></h2>

<p>
	<strong>Posted: </strong><?php echo date('nS F, Y', $post->created_at) ?> (<?php echo Date::time_ago($post->created_at)?>)
	by <?php echo $post->user->username ?>
</p>

<p><?php echo nl2br($post->body) ?></p>

<hr />

<h3 id="comments">Comments</h3>

<?php foreach ($post->comments as $comment): ?>

	<p><?php echo Html::anchor($comment->website, $comment->name) ?> said "<?php echo $comment->message?>"</p>

<?php endforeach; ?>

<h3>Write a comment</h3>

<?php echo Form::open('blog/comment/'.$post->slug) ?>

<div class="row">
	<label for="name">Name:</label>
	<div class="input"><?php echo Form::input('name'); ?></div>
</div>

<div class="row">
	<label for="website">Website:</label>
	<div class="input"><?php echo Form::input('website'); ?></div>
</div>

<div class="row">
	<label for="email">Email:</label>
	<div class="input"><?php echo Form::input('email'); ?></div>
</div>

<div class="row">
	<label for="message">Comment:</label>
	<div class="input"><?php echo Form::textarea('message'); ?></div>
</div>

<div class="row">
	<div class="input"><?php echo Form::submit('submit'); ?></div>
</div>

<?php echo Form::close() ?>

This code will output all comments in a very basic style followed by a really simple form using Twitter Bootstrap markup. I’m sure you can whip up some styling for the comments section.

Comment form

We can see the comment is being output and any that are added will also be put in. So the next and final stage in the process is to get comments saved.

The line with Form::open('blog/comment/'.$post->slug) will set the action to blog/comment/women-love-guys-who-use-fuelphp which means Controller_Blog needs a new method action_comment($slug) which should look something like this:

public function action_comment($slug)
{
	$post = Model_Post::find_by_slug($slug);

	// Lazy validation
	if (Input::post('name') AND Input::post('email') AND Input::post('message'))
	{
		// Create a new comment
		$post->comments[] = new Model_Comment(array(
			'name' => Input::post('name'),
			'website' => Input::post('website'),
			'email' => Input::post('email'),
			'message' => Input::post('message'),
			'user_id' => $this->current_user->id,
		));

		// Save the post and the comment will save too
		if ($post->save())
		{
			$comment = end($post->comments);
			Session::set_flash('success', 'Added comment #'.$comment->id.'.');
		}
		else
		{
			Session::set_flash('error', 'Could not save comment.');
		}

		Response::redirect('blog/view/'.$slug);
	}

	// Did not have all the fields
	else
	{
		// Just show the view again until they get it right
		$this->action_view($slug);
	}
}

Summary

This article skipped a few things like how to set up a pretty URL instead of localhost/blog/public and how to use form validation in the model or the controller, but all of this can be found in the FuelPHP Documentation. I planned to touch on things like File Uploads and Migrations a little more but again this is all documented already.

You should have enough code now to pick apart and play with, and whatever project you choose to work on with FuelPHP already has a blog now – so throw up a splash page, design it and you are ready to make the next SquareFaceTwitBook.


December 13 2010

13:23

What To Do When Your Website Goes Down

Advertisement in What To Do When Your Website Goes Down
 in What To Do When Your Website Goes Down  in What To Do When Your Website Goes Down  in What To Do When Your Website Goes Down

Have you ever heard a colleague answer the phone like this: “Good afterno… Yes… What? Completely?… When did it go down?… Really, that long?… We’ll look into it right away… Yes, I understand… Of course… Okay, speak to you soon… Bye.” The call may have been followed by some cheesy ’80s rock ballad coming from the speaker phone, interrupted by “Thank you for holding. You are now caller number 126 in the queue.” That’s your boss calling the hosting company’s 24 hour “technical support” line.

An important website has gone down, and sooner or later, heads will turn to the Web development corner of the office, where you are sitting quietly, minding your own business, regretting that you ever mentioned “Linux” on your CV. You need to take action. Your company needs you. Your client needs you. Here’s what to do.

1. Check That It Has Actually Gone Down

Don’t take your client’s word for it. Visit the website yourself, and press Shift + Refresh to make sure you’re not seeing a cached version (hold down Shift while reloading or refreshing the page). If the website displays fine, then the problem is probably related to your client’s computer or broadband connection.

If it fails, then visit a robust website, such as google.com or bbc.co.uk. If they fail too, then there is at least an issue with your own broadband connection (or your broadband company’s DNS servers). Chances are that you and your client are located in the same building and the whole building has lost connectivity, or perhaps you have the same broadband company and its engineers have taken the day off. You will need to check the website on your mobile phone or phone a friend. To be doubly sure, ask your friend to check Where’s It Up? or Down for Everyone or Just Me?, which will confirm whether your website is down just for you or for everyone.

If the website is definitely down, then frown confusedly and keep reading. A soft yet audible sigh would also be appropriate. You might want to locate the documents or emails that your Internet hosting service sent you when you first signed up with it. It should have useful details such as your IP address, control panel location, log-in details and admin and root passwords; these will come in handy.

2. Figure Out What Has Gone Down

A website can appear to have gone down mainly for one of the following reasons:

  • A programming error on the website,
  • A DNS problem, or an expired domain,
  • A networking problem,
  • Something on the server has crashed,
  • The whole server has crashed.

To see whether it’s a programming error, visit the website and check the status bar at the bottom of your browser. If it says “Done” or “Loaded,” rather than “Waiting…” or “Connecting…,” then the server and its software are performing correctly, but there is a programming error or misconfiguration. Check the Apache error log for clues.

Otherwise, you’ll need to run some commands to determine the cause. On a Mac with OS X or above, go to Applications → Utilities and run Terminal. On a PC with Windows, go to Start → All Programs → Accessories and choose “Command Prompt.” If you use Linux, you probably already know about the terminal; but just in case, on Ubuntu, it’s under Applications → Accessories.

The first command is ping, which sends a quick message to a server to check that it’s okay. Type the following, replacing the Web address with something meaningful to you, and press “Enter.” For all of the commands in this article, just type the stuff in the grey monospaced font. The preceding characters are the command prompt and are just there to let you know who and where you are.

C:\> ping www.stockashop.co.uk

If the server is alive and reachable, then the result will be something like this:

Reply from 92.52.106.33:
bytes=32 time=12ms TTL=53

Linux-commands-ping1 in What To Do When Your Website Goes Down
Ping command from a Windows computer.

On Windows, it will repeat four times, as above. On Linux and Mac, each line will start with 64 bytes from and it will repeat indefinitely, and you’ll need to press Control + C to stop it.

The four-part number in the example above is your server’s IP address. Every computer on the Internet has one. At this stage, you can double-check that it is the correct one. You’ll need to have a very good memory, or refer to the documentation that your hosting company sent you when you first signed up with it. (This article does not deal with the newish eight-part IPv6 addresses.)

For instance, my broadband company is sneaky and tries to intercept all bad requests so that it can advertise to me when I misspell a domain name in the Web browser. In this case, the ping looks successful but the IP address is wrong:

64 bytes from advancedsearch.virginmedia.com
(81.200.64.50): icmp_seq=1 ttl=55 time=26.4 ms

Note that ping might also show the server name in front of the IP address (advancedsearch.virginmedia.com in this case). Don’t worry too much if it doesn’t match the website you are pinging — a server can have many names. The IP address is more important.

Assuming you’ve typed the domain name correctly, a bad IP address indicates that the domain name could have expired or that somebody has made a mistake with its DNS settings. If you receive something like unknown host, then it’s definitely a domain name issue:

ping: unknown host www.nosuchwebsite.fr

In this case, use a website such as Who.is to verify the domain registration details, or run the whois command from Linux or Mac. It will at least tell you when it expired, who owns it and where it is registered. The Linux and Mac commands host and nslookup are also useful for finding information about a domain. The nslookup command in particular has many different options for querying different aspects of a domain name:

paul@MyUbuntu:~$ whois stockashop.co.uk
paul@MyUbuntu:~$ host stockashop.co.uk
paul@MyUbuntu:~$ nslookup stockashop.co.uk
paul@MyUbuntu:~$ nslookup -type=soa stockashop.co.uk

If nothing happens when you ping, or you get something like request timed out, then you can deepen your frown and move on to step three.

Linux-commands-no-response in What To Do When Your Website Goes Down
What a non-responding server looks like in a Linux terminal.

Alternatively, if your server replied with the correct IP address, then you can exhale in relief and move on to step five.

Note that there are plenty of websites such as Network-Tools.com that allow you to ping websites. However, using the command line will impress your colleagues more, and it is good practice for the methods in the rest of this article.

3. How Bad Is It?

If your ping command has timed out, then chances are your whole server has crashed, or the network has broken down between you and the server.

If you enjoy grabbing at straws, then there is a small chance that the server is still alive and has blocked the ping request for security reasons — namely, to prevent hackers from finding out it exists. So, you can still proceed to the next step after running the commands below, but don’t hold your breath.

To find out if it is a networking issue, use traceroute on Mac or Linux and tracert on a PC, or use the trace option on a website such as Network-Tools.com. On Mac and Linux type:

paul@MyUbuntu:~$ traceroute www.stockashop.co.uk

On Windows:

C:\> tracert www.stockashop.co.uk

Traceroute traces a route across the Internet from your computer to your server, pinging each bit of networking equipment that it finds along the way. It should take 8 to 20 steps (technically known as “hops”) and then time out or show a few asterisks (*). The number of steps depends on how far away the server is and where the network has broken down.

The first couple of steps happens in your office or building (indicated by IP addresses starting with 192.68 or 10). The next few belong to your broadband provider or a big telecommunications company (you should be able to tell by the long name in front of the IP address). The last few belong to your hosting company. If your server is alive and well, then the very last step would be your server responding happily and healthily.

Linux-commands-traceroute in What To Do When Your Website Goes Down
Traceroute on a Mac, through the broadband company and host to an unresponsive server.

Barring a major networking problem, like a city-wide power outage, traceroute will reach your hosting company. Now, you just need to determine whether only your server is ill or a whole rack or room has gone down.

You can’t tell this just from traceroute, but chances are the servers physically next to yours have similar IP addresses. So, you could vary the last number of your server’s IP address and check for any response. If your server’s IP address is 123.123.123.123, you could try:

C:\> ping 123.123.123.121
C:\> ping 123.123.123.122
C:\> ping 123.123.123.124
C:\> ping 123.123.123.125

If you discover that the server is in the middle of a range of 10 to 20 IP addresses that are all broken, then it could well indicate a wider networking issue deep within the air-conditioned, fireproof bunker that your server calls home. It is unlikely that the hosting company would leave so many IP addresses unused or that the addresses would have all crashed at the same time for different reasons. It is likely, though not definitive, that a whole rack or room has been disconnected or lost power… or burned down.

Alternatively, if nearby IP addresses do reply, then only your server is down. You can proceed to the next step anyway and hope that the cause is that your server is very secure and is blocking ping requests. Perhaps upgrade that deep frown to a pronounced grimace.

Otherwise, you’ll have to keep listening to Foreigner until your hosting company answers the phone. It is the only one that can fix the network and/or restart the server. But at least you now have someone else to blame. And if you are number 126 in the queue, it’s probably because 125 other companies think their websites have suddenly gone down, too.

4. Check Your Web Server Software

If the server is alive but just not serving up websites, then you can make one more check before logging onto the server. Just as your office computer has a lot of software for performing various tasks (Photoshop, Firefox, Mac Mail, Microsoft Excel, etc.), so does your server. Arguably its most important bit of software is the Web server, which is usually Apache on Linux servers and IIS on Windows servers. (From here on in, I will refer to it as “Web server software,” because “Web server” is sometimes used to refer — confusingly — to the entire server.)

When you visit a website, your Web browser communicates with the Web server software behind the scenes, sharing caching information, sending and receiving cookies, encrypting and decrypting, unzipping and generally managing your browsing experience.

You can bypass all of this and talk directly to the Web server software by using the telnet command, available on Windows, Linux and Mac. It will tell you conclusively whether your Web server software is alive. The command ends with the port, which is almost always 80:

ping@MyUbuntu:~$ telnet www.stockashop.co.uk 80

If all were well, then your Web server software would respond with a couple of lines indicating that it is connected and then wait for you to tell it what to do. Type something like this, followed by two blank lines:

GET / HTTP/1.1
Host: www.stockashop.co.uk

The first / tells it to get your home page; you could also say GET /products/index.html or something similar. The Host line tells it which website to return, because your server might hold many different websites. If your website were working, then your Web server software would reply with some headers (expiry, cookies, cache, content type, etc.) and then the HTML, like this:

Linux-commands-telnet3 in What To Do When Your Website Goes Down
Checking the web server software with telnet.

But because there is a problem, telnet will either not connect (indicating that your Web server software has crashed) or not respond (indicating that it is misconfigured). Either way, you’ll need to keep reading.

5. Logging Into Your Server

The remote investigations are now over, and it’s time to get up close and personal with your errant server.

First, check your server’s documentation to see whether the server has a control panel, such as Plesk or cPanel. If you’re lucky, it will still be working and will tell you what is wrong and offer to restart it for you (in Plesk, click Server → Service Management).

Linux-commands-plesk in What To Do When Your Website Goes Down
If your server has a control panel such as Plesk, try logging in to make sure the Web server is running.

If not, then the following commands apply to dedicated Linux servers. You could try them in shared hosting environments, but they probably won’t work. Windows servers are a different kettle of fish and won’t be addressed in this article.

To log in and run commands on the server, you will need the administrative user name and password and the root password, as provided by your host. For shared hosting environments, an FTP user name and password might work.

On Linux and Mac, the command to run is ssh, which stands for “secure shell” and which allows you to securely connect to and run commands on your server. You will need to add your administrative user name to the command after -l, which stands for “login”:

paul@MyUbuntu:~$ ssh -l admin www.stockashop.co.uk

Windows doesn’t come with ssh, but you can easily download a Windows SSH client such as Putty. Download putty.exe, save it somewhere and run it. Type your website as the host name and click “Open.” It will ask you who to log in as and then ask for your password.

Linux-commands-putty in What To Do When Your Website Goes Down
Using Putty to SSH from a Windows computer.

Once you have successfully logged in, you should see something like admin@server$, followed by a flashing or solid cursor. This is the Linux command line, very similar to the Terminal or command prompt used above, except now you are actually on the server; you are a virtual you, floating around in the hard drive of your troubled server.

If ssh didn’t even connect, then it might be blocked by a firewall or turned off on the server. If it said Permission denied, then you’ve probably mistyped the user name or password. If it immediately said Connection to www.stockashop.co.uk closed, then you are trying to log in with a user name that is not allowed to run commands; make sure you’re logging in as the administrative user and not an FTP user.

6. Has It Run Out Of Space?

Your server has likely not run out of hard disk space, but I’m putting this first because it’s a fairly easy problem to deal with. The command is df, but you can add -h to show the results in megabytes and gigabytes. Type this on the command line:

admin@server$ df -h

The results will list each file system (i.e. hard drive or partition) and show the percentage of each that has been used.

Linux-commands-dfh in What To Do When Your Website Goes Down
Checking hard disk usage on a Linux server.

If any of them show 100% usage, then the command probably took eons to type, and you will need to free up some space fast.

Quick Fix

You should still be able to FTP to the server and remove massive files that way. A good place to start is the log files and any back-up directories you have.

You could also try running the find command to search for and remove huge files. This command finds files bigger than 10 MB and lets you scroll through the results one page at a time. You might need to run it as root to avoid a lot of permission denied messages (see below for how to do this). It might also take a long time to run.

root@server# find / -size +10000000c | more

You could also restrict the search to the full partition or to just your websites, if you know where they are:

root@server# find /var/www/vhosts/ -size +10000000c | more

If you want to know just how big those files are, you can add a formatting sequence to the command:

root@server# find /var/www/vhosts -size +10000000c -printf "%15s %p\n"

When you’ve found an unnecessarily big file, you can remove it with rm:

root@server# rm /var/www/vhosts/badwebsite.com/backups/really-big-and-old-backup-file.tgz

Permanent Fix

Clearing out back-ups, old websites and log files will free up a lot of space. You should also identify any scripts and programs that are creating large back-up files. You could ask your host for another hard drive.

7. Has It Run Out Of Memory?

Your server might just be running really, really slowly. The free command will let you know how much memory it is using. Add -m to show the results in megabytes.

admin@server$ free -m

The results will show how much of your memory is in use.

Linux-commands-freem in What To Do When Your Website Goes Down
Checking memory usage on a Linux server.

The results above say that the server has 3550 MB, or 3.5 GB, of total memory. Linux likes to use as much as possible, so the 67 MB free is not a problem. Focus on the buffers/cache line instead. If most of this is used, then your server may have run out of workable memory, especially if the swap space (a bit of the hard drive that the server uses for extra memory) is full, too.

If your server has run out of memory, then the top command will identify which bit of software is being greedy.

admin@server$ top

Every few seconds, this gives a snapshot of which bits of software are running, which user started them and how much of your memory and CPU each is using. Unfortunately, this will run very slowly if memory is low. You can press “Q” or Control + C to exit the command.

Linux-commands-top in What To Do When Your Website Goes Down
The Linux top command shows what is running.

Each of the bits of software above is known as a “process.” Big pieces of software such as Apache and MySQL will often have a parent process with a lot of child processes and so could appear more than once in the list. In this benign example, a child process of the Apache Web server is currently the greediest software, using 7.6% of the CPU and 1.6% of the memory. The view will refresh every three seconds. Check the Mem column to see whether anything is consistently eating up a large portion of the memory.

Quick Fix

The quickest solution is to kill the memory hog. You will need to be root to do this (unless the process is owned by you — see below). First of all, though, search on Google to find out what exactly you are about to kill. If you kill a core program (such as the SSH server), you’ll be back to telephone support. If you kill your biggest client’s data amalgamation program, which has been running for four days and is just about to finish, then the client could get annoyed, despite your effort to sweeten it with “But your website is okay now!”

If the culprit is HTTPD or Apache or MySQLd, then skip to the next section, because those can be restarted more gracefully. In fact, most things can be restarted more gracefully, but this is a quick ignore-the-consequences type of fix.

Find the process ID in the PID column of the command above, and type kill -9, followed by the number. For example:

root@server# kill -9 23421

The -9 tells it to stop completely and absolutely. You can now run top again to see whether it has made a difference. If some other similar process has jumped to the memory-eating position instead, then you’ve probably only stopped a child process, and you will need to find the parent process that spawned all the greedy children in the first place, because stopping the parent will stop all the children, too. Use the process ID again in this command:

root@server# ps -o ppid,user,command 23421

This asks Linux to show you the parent process ID, user and command for the process number 23421. The results will look like this:

PPID  USER     COMMAND
31701 apache   /usr/sbin/httpd

The PPID is the parent process ID. Now try killing this one:

root@server# kill -9 31701

Run top again. Hopefully, the memory usage has now returned to normal. If the parent process ID was 0, then some other process entirely is consuming memory, so run top again.

Permanent Fix

You will probably have to restart the offending software at some point because you may have just disabled your server’s SPAM filter or something else important. If the problem was with Apache or MySQL, you might have an errant bit of memory-eating programming somewhere, or Apache, MySQL or PHP might have non-optimal memory limits. There’s a slim chance that you have been hacked and that your server is slow because it’s sending out millions of emails. Sometimes, though, a server has reached capacity and simply needs more RAM to deal with the afternoon rush.

To find out what went wrong in the first place, check the web logs and/or the log files in /var/log/. When your hosting company has finally answered the phone, you can ask it to also take a look. Figuring out what happened is important because it could well happen again, especially if it’s a security issue. If the hosting company is not responsive or convincing enough, seek other help.

8. Has Something Crashed?

Most Linux servers use Apache for the Web server software and MySQL for the database. It is easy to see whether these are still running (and to restart them if they’re not) or are using up way too much memory. To see all processes running on your server right now, run this command:

admin@server$ ps aux | more

Scroll through the list and look for signs of apache (or its older name httpd) and mysqld (the “d” stands for daemon and is related to the way the programs are run). You are looking for something like this:

USER       PID %CPU %MEM   VSZ   RSS TTY     STAT START   TIME COMMAND
apache   29495  0.5  1.4 90972 53772 ?       S    14:00   0:02 /usr/sbin/httpd
apache   29683  0.3  1.4 88644 52420 ?       S    14:03   0:00 /usr/sbin/httpd
apache   29737  0.3  1.4 88640 52520 ?       S    14:04   0:00 /usr/sbin/httpd

Or you can use the grep command to filter results:

admin@server$ ps aux | grep http
admin@server$ ps aux | grep mysql

If either Apache or MySQL is not running, then this is the source of the problem.

Linux-commands-psmore in What To Do When Your Website Goes Down
This listing shows that Apache is indeed running.

Quick Fix

If Apache or MySQL is not running, then you’ll need to run the commands below as root (see below). Linux usually has a set of scripts for stopping and starting its major bits of software. You first need to find these scripts. Use the ls command to check the couple of places where these scripts usually are:

root@server# ls /etc/init.d/

If the results include a lot of impressive-looking words like crond, httpd, mailman, mysqld and xinetd, then you’ve found the place. If not, try somewhere else:

root@server# ls /etc/rc.d/init.d/

Or use find to look for them:

root@server# find /etc -name mysqld

Once it is located, you can run a command to restart the software. Note that the scripts might have slightly different names, like apache, apache2 or mysql.

root@server# /etc/init.d/httpd restart
root@server# /etc/init.d/mysqld restart

Hopefully, it will say something like Stopping… Starting… Started. Your websites will start behaving normally again!

Permanent Fix

As above, check the log files, especially the Apache error logs. Sometimes these are all in one place, but usually each website on the server has its own error log. You could look through the ones that were busiest around the time of the crash. Or else you could have a misconfiguration or a programming bug or security breach, so it could well happen again until you identify and address the cause.

Becoming a Super-User

Most of the fixes above require special permissions. For example, you (i.e. the user you have logged in as) will be able to kill or restart processes only if you started them. This can happen on shared servers but is unlikely on dedicated servers, where you will see a lot of permission denied messages. So, to run those commands, you will need to become the server’s super-user, usually known as “root.” I’ve left this for last because it’s dangerous. You can do a lot of irreversible damage as root. Please don’t remove or restart anything unless you’re sure about it, and don’t leave your computer unattended.

There are two ways to run a command as root. You can prefix each command with sudo, or you can become root once and for all by typing su. Different servers place different restrictions on these commands, but one of them should work. The sudo command is more restrictive when it turns you into a lesser non-root super-user who is able to run some commands but not others. Both commands will ask for an extra password. For example:

admin@server$ sudo /etc/init.d/httpd restart

When you run su successfully, the prompt will change from a $ to a #, like this:

admin@server$ su
Password:
admin@server#

It might say admin@server or root@server. Either way, the # means that you are powerful and dangerous — and that you assume full liability for your actions.

Conclusion

This article has provided a few tips for recognizing and solving some of the most common causes of a website going down. The commands require some technical knowledge — or at least courage — but are hopefully not too daunting. However, they cover only a small subset of all the things that can go wrong with a website. You will have to rely on your hosting company if it is a networking issue, hardware malfunction or more complicated software problem.

Personally, I don’t mind the ’80s music that plays while I’m on hold with my hosting company. It’s better than complete silence or a marketing message. But it would be even better if the support rep picked up the phone within a few seconds and was ready to help. That is ultimately the difference between paying $40 per month for a dedicated server versus $400.

When the dust has settled, this might be a conversation worth having with your boss — the one still sitting glumly by the phone, eyeing your frown, and waiting for Bono to stop warbling.

(al)


© Paul Tero for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: admin, Coding, linux, maintenance

Sponsored post
soup-sponsored
20:53
Reposted byLegendaryy Legendaryy

August 03 2010

21:00

40 Highly Customizable Commercial Admin Templates And Skins

Preview-commercial-admin-themesBuilding a CMS from scratch can be hard and exhausting work, plus you need to have a good design stitched to it if you’re creating it for client. Sometimes it’s better to spend little money for a great quality product, these highly customizable admin templates could be a great starting point into new project and now there are really big assortment to choose from by.

In this post you’ll find 40 customized, user-friendly and fluid themes to integrate in your CMS. Enjoy!

1. Admintasia ($14)

Admintasia is a complete backend administration user interface that has the flexibility to house any kind of application. It loads last, it’s intuitive and easy to use, it uses only three small images and it also looks good.

Admintasia’s layout is very customizable. With the help of my helper CSS classes you can, for example divide the main content area into one big box and two small ones, or three smaller one, or two big ones. You want two notification boxes side by side? No problem, just add a css class and you’re done and this goes for almost all elements. Everything is fluid. Also, there is an option in the sidebar from which you can set a fixed page width.

Admintasia-commercial-admin-themes

2. Simpla Admin ($22)

Simpla Admin is a professional template with a beautiful and user-friendly interface. With various smart and intuitive jQuery functions, navigating the interface is a breeze.

Some features:

  • Semantic, valid XHTML and CSS
  • Well commented code
  • Liquid layout – content resizes to the user’s window
  • Powered by jQuery
  • Cross-browser compatible
  • WYSIWYG Editor on any text area
  • Simpla-commercial-admin-themes

    3. Complete Liquid ($22)

    Complex Liquid Admin template that contains a login page as well as a modular content page that includes all the elements you could possibly need in your admin. From these elements you should be able to generate any required page.

    Liquid as opposed to a fixed size means all the screen real-estate is used in the most efficient manner possible and also eliminates compatibility issues with non-standard, very low or very high screen resolutions.

    Complete-liquid-commercial-admin-themes

    4. Profi Admin ($22)

    Profi Admin is a clean and simple style template but it’s complexity and expansibility goes beyond expectations. The big visual menu creates the intuitive navigation while the tabbed and the hidden submenu expands the structure to 3 menu levels. Inspired by the WordPress Administration layout.

    Profi-commercial-admin-themes

    5. Boxie ($14)

    Modern looking design, easy to use user interface (UI) and cool user experience (UX). Made in terms of progressive enhancement (using CSS3 properties in order to get as clean code as possible with less images etc.) and with graceful degradation in mind = looks great in modern browsers and good in older browsers as well (just take a look at live preview).

    Boxie-commercial-admin-themes

    6. Cleanity ($17)

    This professional looking and highly flourished skin is suitable for almost any kind purpose. Cleanity is a compilation of all features you might need on an administration theme.

    Some features:

    • Valid XHTML / CSS
    • Flash Like Animated Drop Down Navigation
    • Rounded Corners with No Images
    • Quick Visual Links with Graphical Navigation
    • Visual WYSIWYG Editor on Desired Textareas
    • Works in all Major browsers both in Windows & Mac OSX

    Cleanity-commercial-admin-themes

    7. Wide Admin ($14)

    Wide admin is a powerful lightweight backend interface application, ready to use for any software / CMS you want.

    Some features:

    • Sortable and togglable dialog windows
    • Liquid (fluid) layout, the content resizes to user’s window up to 1600px
    • Two skins – Smooth gray, and silk black
    • Valid XHTML and CSS , crossbrowser compatible. CSS3 (for rounded corners and shadows) is optional
    • Tooltips available for any item
    • Full support / assistance included

    Wide-commercial-admin-themes

    8. Ultra Admin Full ($22)

    Advanced yet easy to use administration panel template. It includes 4 color schemes (the very hot aurora graphic skin, white, blue and dark skins) and is divided in a login page and two content pages that includes all the elements you could possibly need in your admin. From these elements you can generate any required page.

    Ultra-full-commercial-admin-themes

    9. Adminus ($22)

    Adminus is a stylish admin panel template, ready to be implemented as the back-end interface of your application. The template uses smart jQuery scripts and effects, which degrades perfectly.

    Some features:

  • Valid code
  • Liquid layout
  • Implemented WYSIWYG editor
  • Working AJAX / PHP file upload
  • Image preloading
  • Custom font with @font-face
  • Easy skin customization with the provided PSD files
  • Adminus-commercial-admin-themes

    10. Flexy ($17)

    Advanced and easy to use administration theme which comes in 7 different colour variations. The theme is liquid, which means the width of the content area adapts to your browsers window size.

    The template is divided into a login page and a content page that uses 4 different tabs to display the commonly used interface elements, needed to create an admin panel. It comes with many easy to use javascript effects like tabs, datepicker, message dialog, rich text editor, closable elements etc. Allof these elements can be applied with the simple use of html classnames, no need to ever edit the javascript.

    Flexy-commercial-admin-themes

    11. Meta Admin v1 ($17)

    Advanced yet easy to use administration panel template. It includes 4 color schemes (blue, green, grey, red) and is divided in a login page and a content page that includes all the elements you could possibly need in your admin. From these elements you can generate any required page.

    Meta-commercial-admin-themes

    12. Element ($14)

    Element Admin is a static html template that can be used as a starting design for your next web application or cms admin template. It includes the necessary elements to give your backend admin section a modern web 2.0 look.

    Some features:

    • Valid XHTML & CSS
    • Includes several styles including forms, tables, alerts, and more!
    • Code is well documented and comes complete with ReadMe file
    • PSD files included

    Element-commercial-admin-themes

    13. Fresh CMS ($22)

    FreshCMS is a fresh kind of skin/theme, there is no similar kind of skin/theme here on ThemeForest! This skin/theme is almost complete(about 80%). This means that you can save some time in designing and building of a CMS . FreshCMS is packed with jQuery stuff like toggle, styleswitcher, delete content, sortable and more.

    Fresh-cms-commercial-admin-themes

    14. Admin Theme ($12)

    You’re a great PHP programmer, but you find your web applications not really visually appealing? Ultimate Admin Theme is perfect solution for you and your web applications.

    Some features:

  • Tableless
  • Full CSS and xHTML design
  • Dropdown menu
  • Two color schemes
  • Layered PSD included
  • Theme-commercial-admin-themes

    15. Smooth Admin ($14)

    Smooth Admin is a user-friendly administration panel that comes in 6 premade color schemes which include blue, green, brown, purple, red and a greyish light blue. Additionally you can style it any color you like using the included PSD file.

    Some features:

  • Valid XHTML and CSS
  • Cross-browser compatible
  • Date Pickers, Styled Select Lists and Styled Submit Buttons
  • Quick Tabs located at the top of the page for quick navigation with drop down menus
  • TinyMCE Rich Text Editor for text areas
  • Charting and Graphs which is powered by jQuery
  • Smooth-commercial-admin-themes

    16. Pro Manager v2 ($17)

    This theme is a flexible liquid layout with two columns and three menu options. This site is best suitable for a custom admin skins for a corporate business template. For navigation Colors and content background color Settings please follow below mentioned CSS files.

    Pro-manager-commercial-admin-themes

    17. See Admin Interface ($22)

    See Admin Interface is a new theme with a beautiful and accessible interface based on Jquery framework to make user interaction more pleasant.

    Some features:

  • Semantic and valid code (XHTML & CSS )
  • Well commented code (XHTML & CSS & Javascript)
  • Easy to use & customize
  • Two levels main menu
  • Cross browser compatible, IE6 support also
  • Tooltips for errors/notifications/information animated with Jquery
  • See-interface-commercial-admin-themes

    18. Broom Cupboard ($22)

    Broom Cupboard is a simple, stylish and novel back-end theme for any custom dynamic website. Built using valid XHTML and CSS with a few jQuery flourishes (form validation, datepicker), this admin skin is easy to customise and intuitive to use.

    Broom-cupboard-commercial-admin-themes

    19. Admin Control Panel ($17)

    This is a very user-friendly admin template you can very well use for your own clients.

    Some features:

  • Fully HTML5 compliant
  • Crossbrowser compatible
  • Easily switched to a liquid layout
  • WYSIWYG editor
  • Tab-based navigation
  • Control-panel-commercial-admin-themes

    20. Visual Admin ($14)

    Visual Admin is a stylish template designed for both front end and back-end projects. It comes with a separate login page, and being designed with the 960 grid system if offers endless layout options. Using Google Charts, the template shows off how this template could be used as a dashboard or even a front-end application.

    Some features:

  • Semantic, valid XHTML and CSS
  • Well commented Code and detailed Help Documentation
  • Based on 960 grid system – endless layout options
  • Super Clean and Lightweight
  • Date Picker
  • jQuery UI integration – Accordion, Tabs, Slide, Progress Bar
  • WYSIWYG on any Textarea
  • Image Gallery
  • Visual-commercial-admin-themes

    21. Admin Base ($14)

    Admin Base is a complete professional admin user interface that is both functional, stylish and flexible.

    Some features:

  • Clean Functional Design
  • Fluid Grid Layout
  • Customizable Graphs
  • Cross Browser Compatible
  • Well Commented Code
  • Base-commercial-admin-themes

    22. Administry ($17)

    “Administry” is a complete solution control panel template. It is best for content management systems, website backends or as a standalone skin for a web application.

    Some features:

    • Fully  HTML5 + CSS3  compliant
    • Crossbrowser compatible
    • WYSIWYG editor
    • Sortable datatables
    • Charts and graphs
    • Styled forms, headings and tables
    • Well commented code

    Administry-commercial-admin-themes

    23. WeAdmin ($14)

    WeAdmin is a clean and modern admin theme, ready to be structured as your software’s control panel. This template also uses well-known jQuery, jQuery UI scripts and effects.

    Some features:

  • 4 Skins: Dark blue, Black, Red and Green
  • Hide able menu
  • Fluid layout
  • WYSIWYG text editor
  • Images preloading
  • Unobtrusive jQuery powered effects
  • Valid HTML standard
  • Free Icon Pack
  • We-commercial-admin-themes

    24. ProAdmin ($17)

    This Admin Template is a web 2.0 skin for web-based applications and CMSs. It’s just a HTML template. This theme is easy to integrate into existing projects or
    you can start new from scratch. Needs php/html/css skills.

    Some features:

  • Valid HTML and CSS
  • Includes sidebars, tables, form fields, buttons, attention, text styles and more.
  • jQuery DropDown box
  • Tabbed InterFace Using jQuery
  • Code well documented and multipage read_me.pdf
  • Pro-commercial-admin-themes

    25. ForestCP ($14)

    ForestCP is a great and easy to customize backend administration user interface.

    Some features:

  • Valid XHTML 1 .0 Strict
  • 3 Color schemes: Green, Blue and Red
  • jQuery Stylesheet Switcher
  • Notifications can be closed
  • jQuery WYSIWYG Editor
  • Cross-browser compatible
  • PSD Included
  • Forestcp-commercial-admin-themes

    26. Black Admin v2 ($14)

    Black Admin v2 is a nice and beautiful BLACK admin skin to integrate to your CMS or whatever you feel like integrating it to.

    Some features:

  • Valid XHTML / CSS
  • Commented code for easy integration
  • Jquery with Jquery UI for powerful management
  • Cross browser compatible
  • Jquery effects and animations
  • Well documented
  • Black-commercial-admin-themes

    27. Equinox ($22)

    This is a cool admin template that can also be used for business or general purpose sites. It contains all the possible elements you need. Combining these elements can turn out any page useful in an admin panel. It has a cool login page with remember me, forgot password, ajax validation and example php login script.

    Some features:

    • Three levels top main menu
    • Separate windows design for increased flexibility
    • Dropdown action select menu
    • Photo gallery design with lightbox support
    • Event calendar design
    • Messages (5 styles : positive, negative, neutral, tips, warnings)

    Equinox-commercial-admin-themes

    28. Full Admin ($12)

    Full Admin is a complete solution for your admin control panel template. Shipped with both web and mobile templates. Mobile support: iPhone, iPod Touch, Android 2.2 and Opera mini.

    Some features:

  • Complete templates for web and mobile version
  • Cool top menu, support touch screen device eg. iPad.
  • Ready to use Left Shortcut menu
  • WYSIWYG text editor
  • Stylish notification boxes with fade in and fade out effect
  • PSD included
  • Valid HTML standard
  • Full-commercial-admin-themes

    29. Azure Admin ($14)

    Azure Admin is a clean admin template designed for front end and back-end projects. The theme was built to be flexible with six different color options and both fixed width & fluid width layouts included.

    Some features:

    • Semantic & Valid XHTML 1 .0
    • Fixed & Fluid width layouts
    • Well Commented Code and detailed Help Documentation
    • Mega Dropdown Menus
    • Notification Boxes with closing animation
    • Super Clean and Lightweight

    Azure-commercial-admin-themes

    30. iAdmin ($10)

    iAdmin is a powerful mobile admin template which you can run as a web app fullscreen on your iPhone or iPod Touch.

    Do you have a custom website and you would like to be able to quickly check new comments, new users or post an article on the go with your iPhone? Are you building a website for a client and you would like to offer the same functionality along with a standard admin panel? Then iAdmin is the perfect solution for this job as it offers you all the essential features you need and even more to quickly build your mobile admin panel.

    Iphone-commercial-admin-themes

    31. Easy Admin ($14)

    EasyAdmin is a clean and easy to integrate or code with, admin template. It is well commented, documented and designed with the developer in mind.

    Its jquery powered sidebar with custom code, can help you have really quick and easy in front of you the functionality you want to use often in the admin panel, such as adding a user, a post or even updating status on Twitter.

    Some features:

    • Unique widget sidebar
    • Character limit script for Twitter widget
    • 4 colors
    • Markitup editor
    • Tested & works great with all popular browsers (IE, FF, Safari, Chrome, Opera)

    Easy-commercial-admin-themes

    32. Lite Admin ($17)

    LiteAdmin is a backend admin template. This web application template was built with Web 2.0 in mind and will give you all of the elements to jumpstart your backend web application skin. LiteAdmin includes heading styles, tables styles, error and success message styles and much more. This admin theme will easily integrate into existing web applications or be a great start as a theme for your upcoming application.

    Lite-commercial-admin-themes

    33. Control Admin ($14)

    Control Admin is a fluid full-page admin panel with a flexible interface. It utilises all the space on the screen to create a fantastic user experience for the backend administration of your web application / cms. It features clever jquery, multiple colour schemes, and cross browser compatibility. Setting it up, and creating your own pages is a breeze, with a multitude of features available at your fingertips.

    Some features:

    • Semantic, valid HTML5
    • Easy to read, commented code
    • In-depth documentation
    • Cross Browser Compatible
    • Smart ‘Check All’ Checkboxes
    • WYSIWYG Editor
    • Multiple color schemes
    • Fully layered and named PSD’s

    Control-commercial-admin-themes

    34. Admin Panelz ($14)

    Some features:

    • 5 Color schemes (blue, green, orange, red, gray)
    • jQuery powered
    • Change panels position, easy drag and drop
    • Horizontal content slider
    • Select box and upload box new style
    • Fully layered PSD + extra files
    • Valid xHTML/CSS

    Panelz-commercial-admin-themes

    35. Admin UI ($14)

    AdminUI is a great and easy to customize backend administration user interface, ready to use for any software / CMS you want.

    Some features

  • jQuery/UI Powered
  • Based on 960 grid system – endless layout options
  • Custom select form element
  • Cross browser compatible
  • WYSIWYG text editor
  • CSS3 Enhancements
  • Valid XHTML 1 .0
  • Ui-commercial-admin-themes

    36. Dark Admin ($14)

    Dark Admin is a lightweight, easy-to-use, dark HTML admin template. It does not include any CMS features or backend coding. The theme is based on the layout of collis’ Quik v1 Admin Skin, but, it really is a whole different theme because of the color scheme.

    Dark-commercial-admin-themes

    37. Pink Diamond ($17)

    A very clean and unique admin theme with a touch of pink. It ships with an easy-to-use, very flexible six-column CSS grid system (similar to 960.gs). You lay out the content the way you want using valid XHTML 1 .0 Strict. Two-column-width left sidebar? Three right sidebars? No problem. Just look at the preview to get an idea of the endless possibilities.

    Pink-diamond-commercial-admin-themes

    38. Murano Admin ($14)

    Murano Admin is a modern admin template designed for front end and back-end projects. The theme comes with 10 different color options, plus custom colors can be easily integrated.

    Some features:

  • Semantic & Valid XHTML 1 .0 (transitional)
  • Available in 10 colors (blue, red, orange, green, purple, black, grey, navy, maroon, yellow)
  • Well Commented Code and detailed Help Documentation
  • CSS3 Enhancements
  • Cross Browser Compatible
  • Notification Boxes with closing animation
  • Login Page included
  • Murano-commercial-admin-themes

    39. Admin Skin ($17)

    AdminSkin is a back-end theme for any dynamic web site. It uses the latest and greatest of the jQuery library to create a usable and degradable site, while using good code practices and valid code. Plus, it includes a detailed color PDF Manual and screencast support to help anyone use this theme to its full potential. While relatively simple, it can support many layers of navigation.

    Some features:

  • Custom jQuery
  • Pre-styled elements allow easy customization
  • 3 Color Schemes Included
  • Date Picker Form
  • Pre-Styled Code Highlighting
  • Skin-commercial-admin-themes

    40. Karamel Admin ($22)

    Karamel Admin is an administrative panel with a flexible interface and a set of interface elements, which among other things contains a calendar with backlight days with events and statistics of visitors from Google Analytics.

    Some features:

    • jQuery / UI Powered
    • Google Analytics stats
    • Hide able and resizable sidebar
    • CSS3 buttons (8 styles)
    • WYSIWYG text editor
    • PHP files included
    • Cross browser compatible
    • Well commented code

    Karamel-commercial-admin-themes

    May 29 2010

    10:45

    May 05 2010

    16:28

    Build a WordPress Plugin to Add Author Biographies to your Posts

    Many popular blogs these days are authored by multiple contributors. Today, we’ll create a simple WordPress plugin that will allow us to add the post author’s biography to the conclusion of each post, much like you see on Nettuts.

    Nettuts Author Bio

    1. Have a Bio Ready

    If you don’t already display authors’ biographical info, then the you can add and edit biographical info by heading to the users pane from within the WordPress dashboard, selecting a user, and filling in a quick bio. We’re also going to be adding a gravatar for the author, so ensure that you also set an email address.


    2. Create the Necessary Files

    We’ll need to create a single file that contains the functionality of our plugin. Fire up your FTP of choice, and, within the wp-content/plugins/ folder, create a file called ntauthorbio.php. In order for WordPress to recognize our plugin, we need to create a quick header comment in our file, much like you do at the top of style.css. Paste the following code into your file, and, of course, make adjustments accordingly.

    /*
    Plugin Name: Nettuts Author Bio
    Plugin URI: http://www.nettuts.com/
    Description: This plugin adds an authors bio to his/her post
    Author: nettuts
    Version: 0.1
    Author URI: http://www.nettuts.com/
    */
    

    3. Functions & Actions

    Next, we’ll create the base for our plugin. Paste the following after the opening comment header.

    function author_bio_display($content)
    {
    	// this is where we'll display the bio
    }
    
    function author_bio_style()
    {
    	// this is where we'll style our box
    }
    
    function author_bio_settings()
    {
    	// this is where we'll display our admin options
    }
    
    function author_bio_admin_menu()
    {
    	// this is where we add our plugin to the admin menu
    }
    
    add_action('the_content', 'author_bio_display');
    add_action('admin_menu', 'author_bio_admin_menu');
    add_action('wp_head', 'author_bio_style');
    

    “Hooks are provided by WordPress to allow your plugin to ‘hook into’ the rest of WordPress; that is, to call functions in your plugin at specific times, and thereby set your plugin in motion.”

    Above we’ve created four functions that our plugin will require to work properly. Each function has a specific purpose (as commented above), and also, each is tied to a specific action (apart from author_bio_settings, which will be called from another function.

    When developing plugins, it’s important to understand what a ‘hook’ is. A hook is a place in the running cycle where we can hook into WordPress, and call our functions. For example the hook used above, for author_bio_display, is the_content; this means that when WordPress uses the_content (used for displaying a post/page’s main content), it will first call the function we’ve given it.

    • the_content – the content of the page/post is displayed
    • admin_menu – called when the sidebar in the admin dashboard is created
    • wp_head – lets us add code to the head tags of the page. This is why you include wp_head() when designing your themes.

    4. The Display Function

    The most important function in our plugin is the display function, which will handle the process of actually displaying the information after the content. Before we start, it’s important to note that this function accepts a parameter, called $content. This means that the content of the page/post is passed to our function, so we can then append our author bio.

    Let’s start with a simple if/else statement.

    function author_bio_display($content)
    {
    	// this is where we will display the bio
    
    	if ( is_single() || is_page() )
    	{
    		$bio_box = // placeholder;
    		return $content . $bio_box;
    	} else {
    		return $content;
    	}
    }
    

    Above, we check to see if the content is being displayed on a single post using is_single(), or a page using is_page(). If either returns true, we can post our box which will be placed in the $bio_box variable. Otherwise, if we’re on some different page, such as the archives or front page, we should simply return the content untouched.

    Now we need to add our code for the box to appear, change your $bio_box to match the following code.

    $bio_box =
    '<div id="author-bio-box">
    	'.get_avatar( get_the_author_meta('user_email'), '80' ).'
    	<span class="author-name">'.get_the_author_meta('display_name').'</span>
    	<p>'.get_the_author_meta('description').'</p>
    	<div class="spacer"></div>
    </div>';
    

    The styling, of course, can be changed later to fit your own tastes, but for now, we’ll use a simple box, and will add some CSS to style it shortly.

    We’re using a few functions above to retrieve our required data. get_avatar() is a built-in function in WordPress that will return a user’s gravatar, if they have one, according to their email. We pass the get_avatar() function two parameters; the author’s email, and a size for the image (80px*80px in our case).

    The function get_the_author_metacan retrieve any piece of information about a registered WordPress user. A full list of the items you can return can be found on WordPress Codex.

    If we now run our plugin, we should see something that resembles this:

    It’s not the prettiest looking biography, but we now have the basic functionality we’re after. If you’re still having problems, ensure that the author of the post/page has a biography and/or gravatar, and also ensure that the plugin has been activated in the plugins section of the dashboard. Let’s next style things a bit.

    5. Making it Pretty

    If you’re a designer, here’s your chance to do as you please! My code below is just enough to make our box look clean and simple. To provide an example of how wp_head() can be used, we’ll insert the CSS for this box into the head tag of our document. However, you can also simply place this within your stylesheet.

    This author_bio_style() function needs to return a simple block of CSS.

    function author_bio_style()
    {
    	// this is where we'll style our box
    	echo
    	'<style type=\'text/css\'>
    	#author-bio-box {
    		border: 1px solid #bbb;
    		background: #eee;
    		padding: 5px;
    	}
    
    	#author-bio-box img {
    		float: left;
    		margin-right: 10px;
    	}
    
    	#author-bio-box .author-name {
    		font-weight: bold;
    		margin: 0px;
    		font-size: 14px;
    	}
    
    	#author-bio-box p {
    		font-size: 10px;
    		line-height: 14px;
    		font-style: italic;
    	}
    
    	.spacer { display: block; clear: both; }
    	</style>';
    }
    

    The above code doesn’t require much explanation; CSS is beyond the scope of this tutorial. Generally, we’re just creating a box with a border, and floating the image left. Finally, we add a spacer to make sure the box is big enough to fit the image and text in. You could also use the clearfix hack, or even overflow:hidden to achieve this effect. Ultimately, that will depend on your specific layout.

    Your new fangled box should look similar to mine now; see below.

    6. Making a Settings Page

    Before we wrap up, let’s take a look at adding a settings page in the dashboard for our plugin. Most plugins rely on some sort of settings section to provide a bit more flexibility without the user having to edit any code.

    There are numerous options we could add; such as, where the box appears (top or bottom), the colors used, exclude certain users, and so on. For this tutorial, I’ve chosen to specify if the plugin can appear on only pages, only posts, or both. Hopefully this will be enough to show you the ropes. At that point, you can extend the functionality how you see fit.

    Making the Page

    We need to setup a page in the admin dashboard. To do so, we need to tell WordPress what to do when the admin_menu action triggers. To compensate, we’ll edit our author_bio_admin_menu() function to look like the code below:

    function author_bio_admin_menu()
    {
    	// this is where we add our plugin to the admin menu
    	add_options_page('Author Bio', 'Author Bio', 9, basename(__FILE__), 'author_bio_settings');
    }
    

    The above code creates an options page in the dashboard, and passes the following parameters:

    • Menu NameAuthor Bio
    • Page TitleAuthor Bio
    • Access Privilege9 – or, only Administrator access
    • Handle
    • The required function – author_bio_settings()
      • We next need to provide the page some content. Since we called author_bio_settings() when creating the page, that’s the function we’ll be using to display our options form and update the database.

        The Settings Function

        Simply put, this function needs to display a form with the options. It also needs to check whether the form has been submitted, and, if so, store the new values in the database. First, let’s concentrate on creating the form.

        function author_bio_settings()
        {
        	// this is where we'll display our admin options
        
        	$options['page'] = get_option('bio_on_page');
        	$options['post'] = get_option('bio_on_post');
        
        	echo '
        	<div class="wrap">
        		'.$message.'
        		<div id="icon-options-general" class="icon32"><br /></div>
        		<h2>Author Bio Settings</h2>
        
        		<form method="post" action="">
        		<input type="hidden" name="action" value="update" />
        
        		<h3>When to Display Author Bio</h3>
        		<input name="show_pages" type="checkbox" id="show_pages" '.$options['page'].' /> Pages<br />
        		<input name="show_posts" type="checkbox" id="show_posts" '.$options['post'].' /> Posts<br />
        		<br />
        		<input type="submit" class="button-primary" value="Save Changes" />
        		</form>
        
        	</div>';
        }
        

        We start by grabbing some options from the database. Of course, we don’t currently have a method for setting them yet, so they’ll be blank for now. Next, we display the form, which is already styled by WordPress’ dashboard CSS. You’ll notice we’re displaying a (currently unset) variable called $message; this is so we can notify the user when we update the settings if it was successful.

        We print our options at the end of the checkbox code. If the user turns an option on, we need to store it in the database as ‘checked’ in order to check the checkbox. The functions we use to get and set options are get_option() and update_option() respectively. The get function requires the name of the option (so it’s important to be unique), and the update option needs the name of the option and the new value. If the update function doesn’t find the option, it simply creates a new one.

        So far your page should look like do:

        Now, let’s add our code to take the values sent by the form, and update the options in the database. The form contains a hidden value, called action, which is set to ‘update.’ We’ll check if that value is set, and if so, we update our options. This code should be placed at the top of our autor_bio_settings() function.

        if ($_POST['action'] == 'update')
        {
        	$_POST['show_pages'] == 'on' ? update_option('bio_on_page', 'checked') : update_option('bio_on_page', '');
        	$_POST['show_posts'] == 'on' ? update_option('bio_on_post', 'checked') : update_option('bio_on_post', '');
        	$message = '<div id="message" class="updated fade"><p><strong>Options Saved</strong></p></div>';
        }
        

        If the form has been submitted, we use the ternary operator (if you’re unsure of how these work, look them up – they’re a simple form of if/else) to check whether the checkboxes are checked or not. If they are, then we set the option as ‘checked;’ otherwise we set it as blank. Finally, we set the message displayed to a successful dialog, already styled by WordPress.

        Changing the Output

        Now, we should be able to set options and see them change in our options page; however, the functionality of our plugin will not alter yet as we’ve not told it to do so. So the final step in our project is to make the display function react to these options. In our author_bio_display() function, prepend the following code to the top, in order to get the options previously set.

        $options['page'] = get_option('bio_on_page');
        $options['post'] = get_option('bio_on_post');
        

        Now that we have these values, we only need to execute the display code if the option is set. To do so, we change our if statement accordingly.

        if ( (is_single() && $options['post']) || (is_page() && $options['page']) )
        

        Here we have implemented two conditions that, if met, will cause our box to display. Not too hard, right? Here’s our full plugin:

        <?php
        /*
        Plugin Name: Nettuts Author Bio
        Plugin URI: http://www.nettuts.com/
        Description: This plugin adds an authors bio to his/her post
        Author: nettuts
        Version: 0.1
        Author URI: http://www.nettuts.com/
        */
        
        function author_bio_display($content)
        {
        	// this is where we will display the bio
        
        	$options["page"] = get_option("bio_on_page");
        	$options["post"] = get_option("bio_on_post");
        
        	if ( (is_single() && $options["post"]) || (is_page() && $options["page"]) )
        	{
        		$bio_box =
        		"<div id="author-bio-box">
        			".get_avatar( get_the_author_meta("user_email"), "80" )."
        			<span class="author-name">".get_the_author_meta("display_name")."</span>
        			<p>".get_the_author_meta("description")."</p>
        			<div class="spacer"></div>
        		</div>";
        
        		return $content . $bio_box;
        	} else {
        		return $content;
        	}
        }
        
        function author_bio_style()
        {
        	// this is where we will style our box
        	echo
        	"<style type=\"text/css\">
        	#author-bio-box {
        		border: 1px solid #bbb;
        		background: #eee;
        		padding: 5px;
        	}
        
        	#author-bio-box img {
        		float: left;
        		margin-right: 10px;
        	}
        
        	#author-bio-box .author-name {
        		font-weight: bold;
        		margin: 0px;
        		font-size: 14px;
        	}
        
        	#author-bio-box p {
        		font-size: 10px;
        		line-height: 14px;
        		font-style: italic;
        	}
        
        	.spacer { display: block; clear: both; }
        	</style>";
        }
        
        function author_bio_settings()
        {
        	// this is where we will display our admin options
        	if ($_POST["action"] == "update")
        	{
        		$_POST["show_pages"] == "on" ? update_option("bio_on_page", "checked") : update_option("bio_on_page", "");
        		$_POST["show_posts"] == "on" ? update_option("bio_on_post", "checked") : update_option("bio_on_post", "");
        		$message = "<div id="message" class="updated fade"><p><strong>Options Saved</strong></p></div>";
        	}
        
        	$options["page"] = get_option("bio_on_page");
        	$options["post"] = get_option("bio_on_post");
        
        	echo "
        	<div class="wrap">
        		".$message."
        		<div id="icon-options-general" class="icon32"><br /></div>
        		<h2>Author Bio Settings</h2>
        
        		<form method="post" action="">
        		<input type="hidden" name="action" value="update" />
        
        		<h3>When to Display Author Bio</h3>
        		<input name="show_pages" type="checkbox" id="show_pages" ".$options["page"]." /> Pages<br />
        		<input name="show_posts" type="checkbox" id="show_posts" ".$options["post"]." /> Posts<br />
        		<br />
        		<input type="submit" class="button-primary" value="Save Changes" />
        		</form>
        
        	</div>";
        }
        
        function author_bio_admin_menu()
        {
        	// this is where we add our plugin to the admin menu
        	add_options_page("Author Bio", "Author Bio", 9, basename(__FILE__), "author_bio_settings");
        }
        
        add_action("the_content", "author_bio_display");
        add_action("admin_menu", "author_bio_admin_menu");
        add_action("wp_head", "author_bio_style");
        
        ?>
        

        Voila

        Hopefully if everything went according to plan, you should now have a working authors’ biography box after your posts/pages. Further, you now have a custom settings page in your WordPress dashboard, that you’re free to extend how you see fit.

        Thanks for reading my first post here on Nettuts. If you have any questions feel free to leave a comment below!


    March 04 2010

    20:00

    30 Powerful Wordpress Plugins For Blog Administrators

    title-admin-plugins-for-wordpressTo handle a blog these days can be quite difficult if you are not well-organized and you don’t spend enough time managing it. That’s why there are plugins for WordPress. They literally make your job lot easier and if you work well with them you can put them to work for you.

    Sounds cool I know, but you have to know which plugins are ment for your blog and when to use them. In my opinion, the administration plugins have one of the most important roles in your blog because they are the ones that help you to get: statistics, help you manage content and help you to generate content.

    There are tons of plugins designed to do the job I’ve just mentioned and is pretty difficult to find the plugins you really need. That’s why, in today’s post I’ve selected some of the most powerful administration plugins I know. You should also check out the great article by Saad Bassi about WordPress plugins to change the outlook for Administrator Dashboard .

    Keep in mind that you have to save lots of time in order to become more effective and I’m sure that using these plugins right will save you a lot of time.

    1. FireStats and FireStats Charts

    Firestats is without a dub my favorite plugin for gathering statistics about the traffic that comes to my blogs. It has a powerful monetization system so that you can get info about: user country, ip, browser, operating system and many more. Firestats and Firestats Chart can work separately as well, but I recommend you to use both of them in order to get a better idea about the traffic that comes to your site.

    firestats-admin-plugins-for-wordpress

    2. Custom Admin Branding

    Many people consider this plugin not very useful, but I consider that once with your blog evolution there will be more people to write for you or just more people logging in to your blog and if you are like me you want your own logo to be the one that dominates your creation.

    custom-admin-branding-admin-plugins-for-wordpress

    3. Post Video and Photo Galleries

    Being able to create photo galleries and adding videos to your WordPress blog is just perfect for any type of blog you manage. This plugin helps you to easily do that and also integrates a small button in the visual editor of your post writer.

    post-videos-and-photo-galleries-admin-plugins-for-wordpress

    4. Login with Ajax

    The combination between PHP and Java Script has always a good impact for your visitors. The Ajax Login system brings great login effects which will determine more people to register.

    login-with-ajax-admin-plugins-for-wordpress

    5. Google Analyticator

    If you are a Google Analytics user this plugin saves you a lot of time but if you are not, than you should definitely go and start using it because is the best option for your website traffic statistics.

    6. Admin Management Xtended

    To save more time, Admin Management Xtended brings new Ajax forms to automatically change or add content to your blog without having to reload the page and lose time.

    admin-management-xtended-admin-plugins-for-wordpress

    7. Admin Menu Editor

    Easily customize the Admin Menu as you like.

    admin-menu-editor-admin-plugins-for-wordpress

    8. Database Size WordPress Plugin

    Displays a small and non disturbing message text which contains information about the size of your WordPress blog database.

    database-size-admin-plugins-for-wordpress

    9. Hide Admin Panels

    If you are running a collective blog, this plugin will help you to restrict some permissions for different types of members of your blog. You choose who sees what.

    hide-admin-panels-admin-plugins-for-wordpress

    10. Favicons Chooser

    We all know how important a first impression is and without a dub, the favicon you have on your website is vital and probably the one that remains in your visitors head. Favicons Chooser helps you to easily add or choose a Favicon.

    favicons-chooser-admin-plugins-for-wordpress

    11. Post Ideas

    This plugin stores your ideas about what you would like to write in the near future. When you are ready to post about one of your ideas in the “Post Ideas” just click on it and you will be redirected to the writing page.

    post-ideas-admin-plugins-for-wordpress

    12. Broken Link Checker

    Is pretty messy to find out that the post or page you are looking for is missing or is broken. Broken Link checker helps you to solve this problem and warns you when you should change links.

    broken-link-checker-admin-plugins-for-wordpress

    13. Digital Raindrops Style Sheet

    The admin can easily change the style sheet of each page from the theme directory.

    rain-drops-admin-plugins-for-wordpress

    14. AdRotator

    Helps you to add any type of ad banner anywhere you want and also it helps you to keep a statistics page for them.

    ad-rotator-admin-plugins-for-wordpress

    15. WP Super Cache

    WP Super Cache is a must have plugin for any respected website or blog. It generates static HTML pages for your every page and post so when you have tons of traffic the bandwidth will handle it and you will not have any problems.

    wp-super-cache-admin-plugins-for-wordpress

    16. Genki Pre-publish Reminder

    This is very useful if you are that kind of guy who forgets what to do before posting a new article. If you forget to post an a category for your article or just need to add SEO tags you just have to add those into the Genki Pre-publish reminder.

    genki-pre-post-reminder-admin-plugins-for-wordpress

    17. WP Grins

    Automatically adds clickable smileys for administrator area and also for users comment form.

    wp-grins-admin-plugins-for-wordpress

    18. WP Super Editor

    Get more control over the styles of your blog and also emoticons and layouts.

    wp-super-editor-admin-plugins-for-wordpress

    19. Plugin Installer

    This plugin helps you to get the content of other plugins and automatically installs it. All you have to do is to point the Plugin Installer to the source of the plugin and it will do the rest.

    plugin-installer-admin-plugins-for-wordpress

    20. Batch Categories

    Automatically adds a new page to category management which shows what posts are in that category so that you will be able to easily transfer them to other categories.

    batch-categories-admin-plugins-for-wordpress

    21. Ajax Spell Checker

    One of the most powerful Spell Checkers created for Wordpress.

    spell-checker-admin-plugins-for-wordpresschecker

    22. Custom Write Panel

    This plugin helps you to select the way that your WYSIWYG panel looks like and choose what elements to show and which not.

    custom-write-panel-admin-plugins-for-wordpress

    23. Google Sitemaps Generator

    Automatically generates xml and gz extension sitemaps for your blog which is very important for indexing your pages by Google.

    google-sitemap-generator-admin-plugins-for-wordpress

    24. Share This

    Adds the social media links for every posts and pages.

    share-this-admin-plugins-for-wordpress

    25. Site Unavailable

    Displays a message which alerts your visitors that your website is unavailable. The message is customizable.

    site-unavailable-admin-plugins-for-wordpress

    26. Fluency

    Changes the whole User Interface in Wordpress and creates a great experience for every user.

    fluency-admin-plugins-for-wordpress

    27. Simply Tags

    Helps you to easily manage batch tags so that you will be able to save lots of time.

    simply-tags-admin-plugins-for-wordpress

    28. Adminize

    Compress and hide unnecessary items in your wordpress blog.

    adminize-admin-plugins-for-wordpress

    29. Quick Menu

    Create and customize your own menu in Wordpress Admin Area. You can add all kind of quick links in the menu section like: Google Analytics, Adsense account or just a simple other page.

    quick-menu-admin-plugins-for-wordpress

    30. Admin Notepad

    Adds the Notepad in your Wordpress application. The Notepad panel can be hide or displayed by clicking one simple button.

    admin-notepad-menu-admin-plugins-for-wordpress

    I’ve personally tested all of these amazing plugins and I can confirm that they are great for every type of blogger. Hope it will help you too and stay with us to get more interesting articles about Wordpress and blog management tutorials.

    January 26 2010

    13:34

    7 Awesome WordPress Plugins To Give Your Dashboard A New Look

    If you are a regular user of WordPress like me then you might get bored of the default user interface of WordPress. Although the User Interface of WordPress is good but there is always room for improvement. Automattic the company behind WordPress has decided to go for Open Source Design Contests to make the User Interface of WordPress even better.

    Are you ready to give it a try?

    Default WordPress Dashboard

    In the article we will take a look on some awesome plugins that can alternate the user interface of WordPress to make it more users friendly.

    1. Ozh’s Admin Drop Down Menu

    Admin Drop down Menu is one of the best WordPress plugins to change the default user interface of WordPress admin area. The plugin replaces all the admin links with super charged and beautiful horizontal CSS drop down menu. The plugin also saves you from unnecessary clicks to expand the menu and enhances your productivity.

    Admin Drop Down Dashboard

    The plugin comes with a comprehensive options page. You can change the color schemes of drop down menu and to make the plugin faster, you can also disable the supported icons for each admin link.

    Admin Drop Down Options

    An interesting feature is compact mode which only shows icons for top links and saves space in the drop down menu. The following screen shot elaborates this feature.

    Compact Mode

    2. Fluency Admin 2.2

    Give your WordPress an attractive look with Fluency Admin. The plugin replaces all the admin links with splendid vertical CSS drop down menu. Fluency also adds support of Keyboard shortcuts to your admin links hence enables you to control your WordPress with keyboard only. You can switch between full menu view and icon-only view to save the space of your dashboard area with a single click.

    Fluency Wordpress Dashboard

    Fluency comes bundled with login page theme too which can be enabled from plugin options panel. For custom branding you can also use your own logo at the top of dashboard area and login theme.

    Fluency option panel

    Fluency Options Menu

    Fluency Login Theme

    3. Easy Admin Color Schemes

    The default WordPress installation comes with two color schemes, grey and blue. This plugin adds two more color schemes for your admin panel. Moreover it also grants you to create your own color schemes. You can also export your custom color scheme to use it on other blogs. Depending upon the settings, each user can have its own customized color scheme. Have a look at the Green color scheme and the plugin’s option panel.

    WordPress dashboard green color scheme

    WordPress dashboard green color scheme

    Easy admin color scheme options

    4. Qwerty Admin Panel Theme

    Qwerty Admin Panel Theme is a nice looking Admin Panel theme. The permits you to style the admin panel and login screen for all users. The WordPress logos can be swapped the with your own logo images for custom branding.

    Qwerty WordPress admin panel theme

    Qwerty WordPress admin panel options

    A distinct feature of this plugin is ”

    Limited Interface

    ” capability that helps you in hiding different admin panels from different users of your WordPress installation.

    Qwerty Login theme

    5. Pop Menus for WP-Admin

    This simple plugin will be saving you time by creating quick and easy to use pop menus for your WP-Admin sidebar. Popup menus uses jQuery and CSS to popup animated admin-sidebar links. Moreover it makes the admin sidebar sticking with scrollable page that makes it a real time saver with the help of jQuery.

    Pop menus WordPress dashboard

    Pop-Menus Dashboard

    6. Adminimize

    Adminimize is a very comprehensive and advanced WordPress plugin that comes with a lot of features to customize your WordPress backend. The plugin has a lot of options to hide unnecessary items from the WordPress administration menu, submenu and even the ‘Dashboard’, with forwarding to the Manage-page. The plugin has more than 50 options to tweak the backend of your WordPress installation. The following screenshot shows the admin option panel of Adminimize.

    Adminimize Option Panel

    Adminimize Option Panel

    7. My Brand

    Customizing your WordPress login page can’t be easier than this. Simply install this plugin and with the help of my brand option page you can select the background color or background image for your WordPress login page. You can also upload the custom logo for your login page with the help of my brand. The plugin is very useful for multi-author blogs and user contributed websites.

    My Brand Options Page

    My Brand Options Panel

    If you know more beautiful WordPress dashboard themes or ways to customize the admin panel of WordPress please share them with us.

    Related posts:

    1. Wordpress Plugins : 17 Handy Toolbars For Your Blog
    2. 30 Wordpress Plugins To Help You Improve Your Sidebar
    3. 35 Stylish And Modern Wordpress Plugins Using jQuery UI
    4. 20 New, Useful And Promising Wordpress Plugins
    5. 33 Wordpress Plugins To Power Up Your Comment Section

    Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
    Could not load more posts
    Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
    Just a second, loading more posts...
    You've reached the end.
    (PRO)
    No Soup for you

    Don't be the product, buy the product!

    close
    YES, I want to SOUP ●UP for ...