Archive for February, 2012

jQuery Filter and Sort Plugins

By using jQuery Filter and jQuery Sort Plugins you will be able to have a great control over the order, placement and organization of your page / or table elements. Further some of these plugins include drag-able controls making it possible to offer a more dynamic and user friendly design. Sorting and filtering is very useful if you have large datasets such as table views, however you can also use them for managing list views e.g. for a portfolio page. The Quicksand plugin found below is an example of this.

This post has just been updated, all links checked. It provides an overview of jquery plugins you can use to provide simple yet powerful functionality to reorder, filter, add drag and drop capabilities etc.


1. jQuery Simple Content Sorting Plus Plugin

jQuery Simple Content Sorting Plus Plugin

This plugin creates a simple content sorter for your content and allows you to control your content with pagination! Simple Content Sorting provides a clean and easy way to beautify your interface by providing a slick client side sorting mechanism. You heard correctly, no page loading happens as the sorting takes place since its all done with JavaScript.

MORE INFO / DEMO by Codecanyon (Premium Plugin)

2. Advanced tables

Advanced tables

With this jQuery plugin you convert your flat html tables in nice datagrids in just a few seconds. The plugin will automaticly paginate your table and you can define a particular input field to use as search field for the table.

MORE INFO / DEMO by Codecanyon (Premium Plugin)

3. Beautiful Data

Beautiful Data

Beautiful Data is a great way to turn a boring HTML table into something that supports features like paging and sorting. This jQuery plugin can also access data from CSV and JSON just by specifying the source file.

MORE INFO / DEMO by Codecanyon (Premium Plugin)

4. Simple Content Sorting

Simple Content Sorting

This plugin allows you to sort your content in a clean and easy interface equipped with pagination feature. No page loading happens as the sorting takes place since its all done with javascript.

MORE INFO / DEMO by Codecanyon (Premium Plugin)

5. Ingrid

Ingrid Ingrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.

MORE INFO / DEMO by (Free Plugin)

6. PicNet Table Filter

PicNet Table Filter

This jQuery plugin adds real time Google-like column filtering capabilities to a regular Html table. This is an open source project released under The MIT License (MIT). The PicNet Table Filter is used in production in several PicNet projects so it has been tested production ready. The table filter was born out of our Visual Analytics (Mouse Eye Tracking) project and has received great feedback.

MORE INFO / DEMO by (Free Plugin)

7. tQuery – Dynamic tables

tQuery - Dynamic tables

tQuery makes simple HTML tables dynamic. The script combines power, flexibility and easiness. It offers great design customization, supports multiple formats for column sorting and make exporting and importing data easier. tQuery now support filtering. You can add a search box to your tQuery tables. The search feature give exact and instantaneous results.

MORE INFO / DEMO by Codecanyon (Premium Plugin)

8. Flexigrid


Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

MORE INFO / DEMO by (Free Plugin)

9. Table Sorter


Table Sorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. It has many useful features including multi-column sorting, parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time.

MORE INFO / DEMO by (Free Plugin)

10. Animated table sort (REGEXP friendly)

Animated table sort (REGEXP friendly)

This plugin allows you to animatedly sort a table based on a column’s <td>s, or on the content/value of a child/descendant element within those <td>s. The various <td>s fly to their new homes, giving a nice effect. It also supports sorting on REGEXP matches. You can also control whether row relationships are maintained, whether it sorts on ascii or numeric and ascending or descending.

MORE INFO / DEMO by (Free Plugin)

11. JSquared


This plugin allows you to organize advanced search user interface like in Google Squared.

MORE INFO by fedorchenko (Free Plugin)

12. TinySort


TinySort is a small and simple jQuery plugin that will sort any nodetype by it’s text- or attribute value, or by that of one of it’s children. The examples below should help getting you on your way.

MORE INFO / DEMO by (Free Plugin)

13. jExpand plugin

jExpand plugin

jExpand is ultra lightweight jQuery plugin that will make your tables expandable. Typical for line of business applications, this feature can help you organize tables better. This way, tables can hold more information such as images, lists, diagrams and other elements.

MORE INFO / DEMO by (Free Plugin)

14. jQuery Interface Elements

Interface is a collection of rich interface components which utilizes the lightweight JavaScript library jQuery. With this components you can build rich client web applications and interfaces with the same simplicity as writing JavaScript with jQuery. You will find functions for reordering/sorting lists and tabs, various types of drag and drop etc. interface

MORE INFO by (Free Plugin)

15. Using jQuery To Manipulate and Filter Data

When a webpage is designed to display large tables of data, a great amount of consideration should be dedicated to allowing the user to sort through the data in a structured manner. This article will go through four techniques: hover effects, zebra rows, filtering, and sorting.


MORE INFO by (Free Plugin)

16. Creating a “Filterable” Portfolio with jQuery

If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. This tutorial will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery. portfolio

MORE INFO by (Free Plugin)

17. Quicksand

Whit this really cool plugin you can reorder and filter items with a nice shuffling animation. The demo is a must see! quicksand

MORE INFO / DEMO by (Free Plugin)

18. Table Drag and Drop JQuery plugin

Dragging and dropping rows within a table can’t be handled by general purpose drag and drop utilities for a number of reasons, not least because you need to move the whole row, not just the cell that receives the mouse events. Re-parenting the row also requires specific code. Sadly also, effects like fadeIn and fadeOut don’t work well with table rows on all browsers, so we have to go for simpler effects.

Table Drag and Drop JQuery plugin

This TableDnD plugin allows the user to reorder rows within a table, for example if they represent an ordered list (tasks by priority for example). Individual rows can be marked as non-draggable and/or non-droppable (so other rows can’t be dropped onto them). Rows can have as many cells as necessary and the cells can contain form elements.

MORE INFO by (Free Plugin)

19.  dragtable: Visually reorder all your table columns

Over the past several years, Stuart Langridge’s sorttable Javascript library has found widespread use. It’s easy to see why. Just add class=sortable to a table tag and its column headers automatically support click to sort. Pretty slick. But sometimes sorting just isn’t enough. What if you want to focus on just one or two of the columns in a table? In a client-side application you could drag the columns you care about next to each other. Why not in a web application? Enter dragtable. Like sorttable, it teaches HTML tables a new trick through a simple class attribute. image

MORE INFO / DEMO (Free Plugin)

20. Filtering Blocks

Really cool script to filter a list of blocks. Each block has a wrapping div. It has one class that it shares with all other blocks for common styling and a class unique to its “type”. Filtering Blocks

MORE INFO / DEMO by (Free Plugin)

21. Sortable Lists Using jQuery UI

Unordered lists have a number of useful applications. They are commonly used to structure a site’s navigation. I have found, in a number of web applications, that the ability to reorder (sort) such lists would be extremely useful. There are 2 jQuery plugins that allow elements to be sorted. These are the jQuery Interface plugin and jQuery UI and this tutorial use the latter and also provides a solution for saving the lists. ‘

Sortable Lists Using jQuery UI

MORE INFO / DEMO (Free Plugin)

22. dragndrop

Get Drag and drop in a easy way. dragndrop

MORE INFO / DEMO (Free Plugin)

23. ppDrag

ppDrag is a Drag&Drop plugin for jQuery, which mimics the interface of jQuery UI’s Draggable. Currently supported is a small subset of its options, but the implementation is different (ppDrag focuses on performance). image

MORE INFO / DEMO (Free Plugin)

24. NestedSortable

NestedSortable is an extension to the original Sortable from the Interface plugin that allows you to both sort vertically and nest (make one item a child of other item) elements at the same time, using drag-and-drop. If can be set up exactly like a regular Sortable and allows you to use most options that are inherited from it. NestedSortable

MORE INFO / DEMO (Free Plugin)

25. jQuery UI multiple draggable plugin

The jQuery multiple draggable plugin is an extension to the jQuery UI Draggable plugin. This plugin extends the current functionality to allow for elements to be grouped and dragged as a group. jQuery UI multiple draggable plugin

MORE INFO / DEMO (Free Plugin)

26. jQuery List DragSort

A lightweight jQuery plugin that provides the ability to sort lists using drag and drop. drag and drop jquery plugins

MORE INFO (Free Plugin)

27. Drag and Drop ordering in a TreePanel

This example shows basic drag and drop node moving in a tree. In this implementation there are no restrictions and anything can be dropped anywhere except appending to nodes marked “leaf” (the files). Drag along the edge of the tree to trigger auto scrolling while performing a drag and drop.

Drag and Drop ordering in a TreePanel

MORE INFO (Free Plugin)

28. Drag & Drop Sortable Lists with JavaScript and CSS

This is a collection of Direct Manipulation examples that work in modern browsers. Each example is a proof of concept. It is not based on jQuery but I thought it deserved to be here anyway… Drag & Drop Sortable Lists with JavaScript and CSS

MORE INFO / DEMO (Free Plugin)

29. jQuery columnManager plugin

jQuery columnManager plugin

A jQuery-plugin to toggle the visibility of table columns (collapsing and expanding them) and to save the state until the next visit. It’s supporting tables with colspans and rowspans, too!

MORE INFO / DEMO by (Free Plugin)



SearchBox is a jQuery plugin that allows you to have reach search controls with filters on your pages (similar to GMail and Google Docs).

powerful functionality to reorder, filter, add drag and drop capabilities etc.

MORE INFO / DEMO by Codecanyon (Premium Plugin)


WordPress is one of the best CMSs out there — if not the best (but of course, I’m biased because I’m a WordPress fanatic). It has loads of handy features that make site administration a breeze. WordPress is a publishing platform with a comment system, a GUI for creating, editing and managing posts and pages, handy built-in tools like the “Export” feature to back up your content, user roles and permissions, and more.


But how much of these features do we really use? Though already simple and user-friendly by default, we might want to customize the WordPress Admin interface to make it even simpler and more manageable for our clients, our co-authors, and ourselves.

Why Customize the WordPress Admin Interface?

Lately, WordPress has reached phenomenally high usage rates. There are over 25 million publishers[1] who use WordPress, making it a popular publishing platform. This means that its use has been extended outside of just a blogging platform (although it was certainly built for bloggers at the start) to other types of sites such as portfolios, business sites, image galleries, and even e-commerce sites.

Here is the problem, though. A robust publishing platform like WordPress has way more features than a regular user would ever need. Take the “Comments” panel for instance: Not everyone is going to need all the moderation privileges it has. Some sites might not even need commenting capabilities on their content. For example, a static informational site that doesn’t have a blog section might not want people to be able to comment on static pages like their About and Contact Us page.

The following image shows the default WordPress Dashboard — the first page you’ll see when you log into the Admin area. For tech-savvy folks and power users, it’s great. But imagine a person (such as a paying client of yours) who doesn’t need half of the things they see in this screen. All they want to do is publish a post. Maybe edit it if they make a mistake. That’s it. Nothing else.

The Solution

Luckily, WordPress has a solution. A good one. A completely modular and reversible one, in case you want to quickly revert back to the way things were.

The solution is called Hooks, also known as “Filters” and “Actions”. These guys allow us to “hook” into the WordPress core without modifying its files so that we can safely make changes without compromising the integrity of our installation.

We are going to use WordPress’s different actions and some of the available filters to remove features we do not need. We will also make some basic customization changes to brand our WordPress Admin area for our clients.

The snippets we will be using are mostly from my site, WP Snippets, a searchable repository of WordPress snippets (check it out when you have the time).

WordPress’s functions.php

Let’s get started. The first thing you need to do is open up functions.php in your theme’s directory. If you don’t have a functions.php file, then just create one using your favorite text editor.

functions.php is the file where we will put all our code in. WordPress automatically checks this file, allowing you to customize just about everything before it’s rendered on the screen.

Sounds fuzzy? Here’s how it works. Try out the following code. Don’t worry; it will only affect the Admin area — so your site visitors won’t see it. However, I do want to advise you to experiment offline by installing WordPress on your computer (it’s easier than you think).

function testing() {
  echo 'Hello World!';

add_action( 'admin_head', 'testing' ); 


The code should print ‘Hello World!’ inside the <head> tags in the Admin panel, which isn’t valid HTML code and therefore is printed out at the top of the web page.

The testing() function is our code that we want to run. To hook into WordPress core, we use the add_action() function. In this situation, we pass in two parameters. The first parameter is the name of the action you want to hook into ('admin_head'). The second parameter is the name of the function you want to run ('testing').

After you try this code snippet out, be sure to remove this code from your functions.php file (we’re done with it).

Disable Dashboard Widgets

The first thing people will see when logging into the Admin area is the Dashboard. There, you’ll find widgets like “WordPress Blog,” “Other WordPress News,” and “Incoming Links”. Not very interesting for the average user.

We will be using the wp_dashboard_setup action to remove them. In the function we want to execute, we will use the unset() function to remove the Dashboard widgets we don’t want to display. Then all we need to do is call add_action() using 'wp_dashboard_setup' as the first parameter as well as our function, named remove_dashboard_widgets, as the second parameter.

function remove_dashboard_widgets(){

add_action('wp_dashboard_setup', 'remove_dashboard_widgets');

Check out the WordPress docs entry on removing dashboard widgets for more information.

Disable Standard Widgets

WordPress comes with 12 standard widgets. Some of these default widgets include Calender (WP_Widget_Calendar), Search (WP_Widget_Search) and Recent Comments (WP_Widget_Recent_Comments).

You might want to disable the widgets that aren’t needed for your WordPress installation, again, to simplify and declutter your publishing platform. For example, you might not need the calendar, or maybe you’ve used a third-party search service such as Google Custom Search for your client’s WordPress installation.

For this one, we will be using widgets_init action. We will name our function simply as remove_some_wp_widgets. In our function, we will use WordPress’s unregister_widget() function using the names of the widgets we don’t want to use as the parameter.

Then, like before, we just call add_action. What you’ll see in this code snippet is a third parameter ('1'). The third parameter is the priority of the action. 10 is the default priority, meaning that if you don’t pass a value for this optional parameter, it will assume the value is 10. The lower the number, the higher the priority. So at 1, this is one of the top priority functions that will be called first no matter what its position is in functions.php.

function remove_some_wp_widgets(){

add_action('widgets_init',remove_some_wp_widgets', 1);

Learn more about the Widgets API to see other cool stuff you can do with it.

Removing Menu Items

You might want to remove menu items in the Admin panel to simplify the interface.

This is how you disable top-level menu items such as “Posts,” “Media,” “Appearance,” and “Tools”:

function remove_menu_items() {
  global $menu;
  $restricted = array(__('Links'), __('Comments'), __('Media'),
  __('Plugins'), __('Tools'), __('Users'));
  end ($menu);
  while (prev($menu)){
    $value = explode(' ',$menu[key($menu)][0]);
    if(in_array($value[0] != NULL?$value[0]:"" , $restricted)){

add_action('admin_menu', 'remove_menu_items');

This is how you would remove submenu items under the top-level navigation (for example, the “Theme” link under “Appearance”):

function remove_submenus() {
  global $submenu;
  unset($submenu['index.php'][10]); // Removes 'Updates'.
  unset($submenu['themes.php'][5]); // Removes 'Themes'.
  unset($submenu['options-general.php'][15]); // Removes 'Writing'.
  unset($submenu['options-general.php'][25]); // Removes 'Discussion'.
  unset($submenu['edit.php'][16]); // Removes 'Tags'.  

add_action('admin_menu', 'remove_submenus');

To find what the submenu names are, just go to wp-admin/menu.php and search for the item you want to disable.

Remove the Editor Submenu Item

The Editor link (a submenu item under “Appearance”) is a bit tricky to disable. It doesn’t respond to the unset() function used above. Thus, if we wanted to remove it from the menu, we’d have to remove the action that displays it.

We will use the remove_action() function which simply removes the action from our theme.

function remove_editor_menu() {
  remove_action('admin_menu', '_add_themes_utility_last', 101);

add_action('_admin_menu', 'remove_editor_menu', 1);

Disable Meta Boxes in the Editing Pages

The “Add New” and “Edit” pages — the GUI for creating and editing posts and pages — is probably the most used feature in the Admin area. This is what you and/or your clients will be most exposed to. It serves us well if we try to clean these pages up by removing things that we do not need.

For example, do you use any Custom fields or do you use the Excerpts field? If not, just remove them from this view.

The following code snippet uses the remove_meta_box() function. The first parameter is the meta box’s HTML ID attribute you want to remove.

To find out the ID, just inspect the source code or use a tool like the Web Developer Toolbar to determine the ID attribute value of the section’s containing <div>. For example, the Custom Fields’ ID is #postcustom, so the parameter we use is 'postcustom'.

The second parameter refers to the page you want to remove the meta box from (it can be either 'post', 'page', or 'link').

We are going to remove the custom field, Trackbacks checkbox (because most of the time, we either enable or disable it in all of our posts), the comments status option, tags (if you don’t tag your posts with keywords, why have this input field?), and so on.

function customize_meta_boxes() {
  /* Removes meta boxes from Posts */
  /* Removes meta boxes from pages */


Remove Items from the Post and Page Columns

WordPress’s Admin area often has tables that give you a quick overview of a listing of your content. If you wanted to remove columns from these views, you can.

This time, we will use the add_filter() WordPress function to add a filter instead of an action. A filter is simply a function that watches out for data being called from the database. When it sees something that we want to remove (or modify), it executes the filter first before rendering the data on the web page.

In the example below, we will remove the comments count from the Edit Pages and Edit Posts pages.

function custom_post_columns($defaults) {
  return $defaults;

add_filter('manage_posts_columns', 'custom_post_columns');

function custom_pages_columns($defaults) {
  return $defaults;

add_filter('manage_pages_columns', 'custom_pages_columns');

Customize the Favorites Dropdown

Sitting at the top bar of the Admin area is a dropdown called “favorites” that just lists commonly used Admin tasks such as “New Post,” “Comments” (which takes you to the comment moderation page), and so on — for easy access.

If we wanted to remove items in this menu, we can easily do so. (Of course, we can also add stuff here too.) We can do this by adding another filter and unsetting the link, which is contained in a PHP array called $actions.

function custom_favorite_actions($actions) {
  return $actions;

add_filter('favorite_actions', 'custom_favorite_actions');

The Final Stretch: Miscellaneous Modifications

Everything we have done so far is to disable stuff we don’t need. Now we’ll modify a few things.

Customize the Footer

The footer text in WordPress Admin contains links to the Documentation and to WordPress. Let’s change that.

This snippet just prints out some footer text.

function modify_footer_admin () {
  echo 'Created by <a href="">Filip</a>.';
  echo 'Powered by<a href="">WordPress</a>.';

add_filter('admin_footer_text', 'modify_footer_admin');

Change the Logo

This one’s an old trick, but a good one nonetheless. You can change the logo for the login page and the one in the top left located at the WordPress Admin area pages.

The subsequent code snippet just prints out the CSS (that will be printed inside the <head> tags of Admin pages) that hooks into the div of the logo; it has an ID of #header-logo in the admin pages and it is the h1 > a element for the login page.

For the url property of the style rules, we just feed it the image location of our logo. If the image is inside your WordPress theme’s directory, you can simply use the get_bloginfo('template_directory') template tag to get the relative path to it, followed by the location of the images directory (in this case, it’s called “images”) and then the file name of your image (in this case, admin_logo.png and login_logo.png).

function custom_logo() {
  echo '<style type="text/css">
    #header-logo { background-image: url('.get_bloginfo('template_directory').'/images/admin_logo.png) !important; }

add_action('admin_head', 'custom_logo');

function custom_login_logo() {
  echo '<style type="text/css">
    h1 a { background-image:url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }

add_action('login_head', 'custom_login_logo');

Hide the Upgrade Notice to Recent Versions

There’s no guarantee that your theme will support the next version of WordPress, so to prevent your clients from updating their website, you can ask WordPress to hide this notification.

First, I have to say that this isn’t advisable. WordPress core developers put this notification there for a huge reason: Security updates. But if you must remove it (or modify it), all you have to do is to add a filter for it.

add_filter( 'pre_site_transient_update_core', create_function( '$a', "return null;" ) );

Customize the WYSIWYG Editor’s CSS

If you wanted to customize the appearance of the WYSIWYG editor (maybe to match the theme of your site), you can create a custom stylesheet for it (you can call it something like editor-style.css) and then study the HTML markup to see how you can hook into the classes and IDs of the editor. Then to add your custom stylesheet, you can use the add_editor_style() function.


The reason why you’d want to do this instead of modifying the global.css stylesheet that comes with WordPress is ease of updating the core and modularity. If there’s one major theme to take away in this guide, it’s that you should never modify WordPress core files — there are plenty of ways to hook into them.

The Outcome

Using these snippets of code, you can customize and reduce the Admin area’s features down to just the essentials, permitting us to benefit from the advantages of minimalism and reductionism principles in our work.

This is what I’ve been doing, and my clients love that all the clutter that they don’t need isn’t there.

Here’s a final image of my result (for the “Add New Post” page):

10 WordPress dashboard hacks

Posted: February 23, 2012 in Wordpress
Tags: ,

The dashboard is a very important part of a WordPress blog. In fact, it allows you to control your posts, your blog design, and many more things. When building a site for a client, it is especially important to be able to control WP’s dashboard. In this article, let’s have a look at 10 extremely useful hacks for WordPress’ dashboard.

Remove dashboard menus

When building a WordPress blog for a client, it can be a good idea to remove access to some dashboard menus in order to avoid future problems such as the client “accidentally” deleting the custom theme they paid for.
Paste the following code in the functions.php file from your theme directory. The following example will remove all menus named in the $restricted array.

function remove_menus () {
global $menu;
		$restricted = array(__('Dashboard'), __('Posts'), __('Media'), __('Links'), __('Pages'), __('Appearance'), __('Tools'), __('Users'), __('Settings'), __('Comments'), __('Plugins'));
		end ($menu);
		while (prev($menu)){
			$value = explode(' ',$menu[key($menu)][0]);
			if(in_array($value[0] != NULL?$value[0]:"" , $restricted)){unset($menu[key($menu)]);}
add_action('admin_menu', 'remove_menus');

» Source

Define your own login logo

Although it doesn’t have any importance for the blog performance or usability, most clients will be very happy to see their own logo on the dashboard login page, instead of the classic WordPress logo.
The Custom admin branding plugin can do that for you, as well as the following hack that you just have to paste in your functions.php file.

function my_custom_login_logo() {
    echo '<style type="text/css">
        h1 a { background-image:url('.get_bloginfo('template_directory').'/images/custom-login-logo.gif) !important; }

add_action('login_head', 'my_custom_login_logo');

» Source

Replace dashboard logo with yours

Just as a client will love to see their own logo on WordPress login page, there’s no doubt that they’ll enjoy viewing it on the dashboard too.
Simply copy the code below and paste it to your functions.php file.

add_action('admin_head', 'my_custom_logo');

function my_custom_logo() {
   echo '<style type="text/css">
         #header-logo { background-image: url('.get_bloginfo('template_directory').'/images/custom-logo.gif) !important; }</style>';

» Source

Disable the “please upgrade now” message

WordPress constantly release new versions. Although for obvious security concerns you should always upgrade; disabling the “Please upgrade now” message on client sites can be a good idea because the client doesn’t necessarily have to know about this, this is a developer’s job.

One more time, nothing hard: paste the code in your functions.php, save it, and it’s all good.

if ( !current_user_can( 'edit_users' ) ) {
  add_action( 'init', create_function( '$a', "remove_action( 'init', 'wp_version_check' );" ), 2 );
  add_filter( 'pre_option_update_core', create_function( '$a', "return null;" ) );

» Source

Remove dashboard widgets

Introduced in WordPress 2.7, dashboard widgets can be pretty useful. For example, some can display your Google Analytics stats. Though, sometimes you don’t need it, or at least don’t need some of them.
The code below will allow you to remove WordPress’ dashboard widgets once you paste it in your functions.php file.

function example_remove_dashboard_widgets() {
	// Globalize the metaboxes array, this holds all the widgets for wp-admin
 	global $wp_meta_boxes;

	// Remove the incomming links widget

	// Remove right now

// Hoook into the 'wp_dashboard_setup' action to register our function
add_action('wp_dashboard_setup', 'example_remove_dashboard_widgets' );

» Source

Add custom widgets to WordPress dashboard

With the previous example, I showed you how easy it is to remove unwanted dashboard widgets. The good news is that creating your own widgets isn’t hard either.
The well-commented code below should be self explanatory. Just insert it in your functions.php, as usual.

function example_dashboard_widget_function() {
	// Display whatever it is you want to show
	echo "Hello World, I'm a great Dashboard Widget";

// Create the function use in the action hook
function example_add_dashboard_widgets() {
	wp_add_dashboard_widget('example_dashboard_widget', 'Example Dashboard Widget', 'example_dashboard_widget_function');
// Hoook into the 'wp_dashboard_setup' action to register our other functions
add_action('wp_dashboard_setup', 'example_add_dashboard_widgets' );

» Source

Change WordPress dashboard colors

If you ever wanted to be able to change WordPress dashboard colors (as well as font or even display) without having to edit WordPress core files, you’ll like this hack for sure.
The following example features a basic style change (grey header is replaced by a blue one) but you can easily add as many styles as you wish within the <style> and </style> tags.

function custom_colors() {
   echo '<style type="text/css">#wphead{background:#069}</style>';

add_action('admin_head', 'custom_colors');

Provide help messages

If you’re building a site for a client and they have some problems with some parts of the dashboard, a good idea is to provide contextual help to the client.
The following hack will allow you to add a custom help messages for the blog admin. As usual, you only have to paste the code into your functions.php file.

function my_admin_help($text, $screen) {
	// Check we're only on my Settings page
	if (strcmp($screen, MY_PAGEHOOK) == 0 ) {

		$text = 'Here is some very useful information to help you use this plugin...';
		return $text;
	// Let the default WP Dashboard help stuff through on other Admin pages
	return $text;

add_action( 'contextual_help', 'my_admin_help' );

» Source

Monitor your server in WordPress dashboard

WordPress dashboard API allow you to do many useful things using dashboard widgets. I recently came across this very useful code: a dashboard widget that allows you to monitor your server directly on WordPress’ dashboard.
Paste the code in your functions.php file, and you’re done.

function slt_PHPErrorsWidget() {
	$logfile = '/home/path/logs/php-errors.log'; // Enter the server path to your logs file here
	$displayErrorsLimit = 100; // The maximum number of errors to display in the widget
	$errorLengthLimit = 300; // The maximum number of characters to display for each error
	$fileCleared = false;
	$userCanClearLog = current_user_can( 'manage_options' );
	// Clear file?
	if ( $userCanClearLog && isset( $_GET["slt-php-errors"] ) && $_GET["slt-php-errors"]=="clear" ) {
		$handle = fopen( $logfile, "w" );
		fclose( $handle );
		$fileCleared = true;
	// Read file
	if ( file_exists( $logfile ) ) {
		$errors = file( $logfile );
		$errors = array_reverse( $errors );
		if ( $fileCleared ) echo '<p><em>File cleared.</em></p>';
		if ( $errors ) {
			echo '<p>'.count( $errors ).' error';
			if ( $errors != 1 ) echo 's';
			echo '.';
			if ( $userCanClearLog ) echo ' [ <b><a href="'.get_bloginfo("url").'/wp-admin/?slt-php-errors=clear" onclick="return confirm(\'Are you sure?\');">CLEAR LOG FILE</a></b> ]';
			echo '</p>';
			echo '<div id="slt-php-errors" style="height:250px;overflow:scroll;padding:2px;background-color:#faf9f7;border:1px solid #ccc;">';
			echo '<ol style="padding:0;margin:0;">';
			$i = 0;
			foreach ( $errors as $error ) {
				echo '<li style="padding:2px 4px 6px;border-bottom:1px solid #ececec;">';
				$errorOutput = preg_replace( '/\[([^\]]+)\]/', '<b>[$1]</b>', $error, 1 );
				if ( strlen( $errorOutput ) > $errorLengthLimit ) {
					echo substr( $errorOutput, 0, $errorLengthLimit ).' [...]';
				} else {
					echo $errorOutput;
				echo '</li>';
				if ( $i > $displayErrorsLimit ) {
					echo '<li style="padding:2px;border-bottom:2px solid #ccc;"><em>More than '.$displayErrorsLimit.' errors in log...</em></li>';
			echo '</ol></div>';
		} else {
			echo '<p>No errors currently logged.</p>';
	} else {
		echo '<p><em>There was a problem reading the error log file.</em></p>';

// Add widgets
function slt_dashboardWidgets() {
	wp_add_dashboard_widget( 'slt-php-errors', 'PHP errors', 'slt_PHPErrorsWidget' );
add_action( 'wp_dashboard_setup', 'slt_dashboardWidgets' );

» Source

Remove dashboard widgets according to user role

If you’re owning a multi-user blog, it may be useful to know how to hide some dashboard widgets to keep confidential information in a safe place.
The following code will remove the postcustom meta box for “author” (role 2). To apply the hack on your own blog, just copy the code below and paste it in your functions.php file.

function customize_meta_boxes() {
     //retrieve current user info
     global $current_user;

     //if current user level is less than 3, remove the postcustom meta box
     if ($current_user->user_level < 3)


Oh well, it is time for yet another inspirational post, this time I am featuring really creative and inspiring flash websites. Such websites never stop to surprise, because really there are almost no limitations, you can do and create everything there with action-script, animation, include videos and also create really interactive designs or even games!

I got really amazed what can be done with Flash and how limitless possibilities are. You also may notice there are a lot of design, development and interactive agencies in this article, but that’s really self explaining – creative souls and agencies really offer the greatest creativity, because on their own designs they really have no limits. Enjoy!

50 Gorgeous Flash Websites You Definitely Should See

1. Saizen Media Studios

Excellent digital artwork and animation – dreamy scene!


2.DrawingArt – WebDesign and Development Studio

One of my favorite designs – check it out to understand why!


3. Section Seven

Seriously check out this creative design and development website – you gonna love this – so elegant!


4.Semisture Webdesign


Very creative and beautiful animation saturated webdesign, note interesting flash preloader and line animations when sections loads at first.


5. Fl-2 Interactive Agency

Beautiful typography and mouse hover effects, award winning website.


6. Lecaid Design Studio


7. Esj * Com * AU

Sticky, sticky, very sticky website!


8. Recom CGI

Very nice loading effects – on images, text animation while loading the page – indeed beautiful work!


9. Millice – Cyril Louis

Elegant and light Cyril Louis website, nothing more, nothing less.


10. HYPR – Interactive and Creative Design Studio

Indeed interactive and unique approach.


11. TwistCube

A lot of twisting cubes and elegant approach in this website.


12. Go For Change

Interactive and creative design company encouraging you to go for change!


13.John Wright Photo

Very clean, subtle and professional photography website design, just seems very harmonic and elegant!


14.Timothy Hogan Photography

This is one more beautiful photography flash webdesign, but this one stands out with really huge photographies in full screen leaving everything else in shadow. But photography is his profession, author really shows quality of his works here.


15.LS5 Design Agency

Extremely creative design agency with really a lot of animation going on their website, get cocktail of all the best features!


16. SoyTuaire Labuat

This interactive website gave very strange and inspiring satisfaction feeling!


17. Mattthias Dittrich – Interaction Design Portfolio

Beautiful interactive 3D environment and animation.


18. Museum of Science and Industry

So cute preloader – really made me smile!


Very catching game with scientific taste!


19. Parasol Island – Film Animation Interactive

Company specializing in film animation industry, check out their videos there not only webdesign!



Private web-designer and art director flash website with interesting design and subtle animation.


21.MultiAdaptor: Branding & Identify Systems

Colorful branding website with subtle, but cool animation, i think this is very good way to display text and finished works!


22. Chemical Box

Interesting animation effects, mouse hover their logo to create each letter colorful!


23.Hello Monday

Award winning website, voted as one of the best websites in 2008 – unique project display here and beautiful animation.


24. Blanc Fonce

I would describe this site as simple elegance!


25. 2Advanced Studios

Browse through sections and you’ll notice website is full with beautiful digital artworks and animations showing their skill on every step!


26.Magnetic North – An Interactive design company

One more award winning website – draw and discover yourself what’s on the site!



27. In2Media – Digital Agency

Great typography, background animation,preloader and really good color schemes throughout whole website!


28. Cartelle – Interactive Studio

Very inspiring – share the beat!


29.Progetty Studio

Crazy design in totally good way!


30.Narrow Design

Interesting approach how to display many projects vertically in nice timeline. I just love that white grunge background.


31.Yodabaz – Fresh Webdesign

Interesting 3D text approach and in background is going on animation where author just moves all the time creating interesting feeling.


32.Aiala Garcia – Art Director and Webdesigner

Beautiful colors and elegant sliding effects displaying all the finished projects and everything else in one page!


33.PMA – Projects

Nice 3D effects going on in background which are by the way all the finished projects – impressive.


34. Mcinen

Clean and elegant design company’s website!


35. Nvidia Speak Visual

Nvidia website is full of beautiful effects, I enjoy the most creative spotlight section, where people tell about their passions and feelings working at Nvidia, creative facial videos.


36. Okay Dave – Dave Werner Portfolio

Really unique website board which is designer Dave Werner’s home site.


37. Michael Kelley Photography

Simply gorgeous and elegant photography website


38. Maven Interactive

Very unique portfolio page though actually I enjoy whole website from start to finish!


39. Unit 9 – The Creative Mind

Truly amazing website!


40. CreakTif!

Website built in one very interesting kind of house!


41. Experience 159 – Alfa Romeo

Very exclusive Alfa Romeo car company’s website.


Really amazing mouse hover effects – try them out!


42. NikeLab

Almost all big companies have created beautiful website, Nike is no exception, check it out!


43. Morris Code

From design point of view sketching preloader was the one, which cached my interest!


44. CocaCola Zero

Maybe I am not so big fan of CocaCola, but I totally love their website! Cannot even describe how elegant it is!


45. CocaCola Hapiness Factory

I am sure you have seen creative video advertisements in cinemas, this is original website created like interactive game!


46. Living Sasquatch

Website preloader is really stunning like whole website design!


47. Comcast Town

Just sit back and be inspired! Excellent 3D work has been done here!


48. MadeForEachOther

Very interactive illustrated and animated design! I typed “1stwebdesigner” in love letter to get nice effect!


49. Feed Your Ego

Very strong and powerful website, interesting game and interesting ego customization options.


50. BePop Jeans

Huge vector artwork and animation effects has been added to this site, lovely.



Amazing Interactive Flash Websites

Posted: February 16, 2012 in Must Watch

Interactive websites provides some of the best opportunities to participate purposefully with a website’s presentation. Some of these interactive websites are purely designed for entertainment and others are geared more towards education incorporating user-friendly navigation control functionally. The majority of these sorts of sites are extremely entertaining offering users more than just browsing text and picture content.

100 Best Films



The Corona Beach


Communicator World

Communicator World

Coca-Cola Happiness Factory


Pro Getty Studio
ProGetty Studio


Quit Doing It Labs



Saizen Media
Saizen Media

Starbucks at Home


White Void


Starbucks Love Project

 0006 Layer%204



Nokia Evolve


Lacoste Red

Patagonia – Tin Shed


Harajuku Lovers Fragrance

 0005 Layer%205

Rabbids Go Home

 0004 Layer%206

NcK Design

Herbal Essences Spice

Nissan Cars UK



Me InTru 3D



As a php web developer you will often have the problem to create a simple, stable and secure backoffice system. How many crud different did you create for you customers? I suppose many . How much time did you spend to create them? It actually takes a lot of time (sometimes weeks) to create all the business logic, the models and the views again from the beginning for each table. As you can see there are similar things in those projects. The Create ( or else Add) the Update (or else Edit) and the Delete. With grocery Crud and with the power of codeigniter framework , you can create a full CRUD in just one minute.

With this Codeigniter CRUD generator , you don’t have to copy all your css, JavaScripts, tables, forms, lists, functions , models, libraries, views again and again to your backoffice system. Just few lines of code and you are ready to have your own CMS. The CRUD is working well with Codeigniter 1.7.x, 2.0.x and 2.1.x

Below there are some examples of the basic features of the codeigniter CRUD


Below you can click and see all the examples

Simple Examples

Here you will find really simple examples to begin with.

Employees – Customers Database examples

A testing database with 8 tables. There are good examples to see how grocery CRUD works with a real database. The database you can find it by downloading grocery CRUD.

Callback examples

Almost everywhere you will find callbacks. With callback you can escape the default and automatic functionality and add your own functions. You can add callbacks after or before an automatic CRUD operation. Below there are some examples for how to use callbacks.




You can find the project under:

A couple months ago i have developed PHP application. That’s was the first time (and the only one) i used CodeIgniter. The development itself only took a short period, thanks to helpful plugins and libraries such as excel_reader, jpgraph, dompdf and many more. At this moment, i want to share my humble knowledge in creating simple PHP application.

As the title suggest, we are going to create simple CRUD (Create Read Update Delete) application using CodeIgniter framework. The application that we are going to build is not a complex application (that’s why we call it “simple”) but consists of features such as pagination and simple validation.

Here, i’m using CodeIgniter_1.6.3 and MySql 5. Let’s begin.

  1. Database schema. run this script.
    01 CREATE DATABASE crud;
    03 USE crud;
    04 CREATE TABLE tbl_person
    05 (
    06   id bigint auto_increment PRIMARY KEY,
    07   name varchar(50),
    08   gender char(1),
    09   dob date
    10 );
    12 INSERT tbl_person (name,gender,dob) VALUES('henrihnr', 'm', '1985-09-09');
    13 INSERT tbl_person (name,gender,dob) VALUES('name_001', 'm', '1990-01-01');
    14 INSERT tbl_person (name,gender,dob) VALUES('name_002', 'f', '2000-01-01');
    15 INSERT tbl_person (name,gender,dob) VALUES('name_003', 'm', '2000-02-02');
    16 INSERT tbl_person (name,gender,dob) VALUES('name_005', 'f', '2000-04-04');
  2. Database configuration. file: CodeIgniter\system\application\config\database.php
    1 $active_group = "default";
    2 $active_record = TRUE;
    4 $db['default']['hostname'] = "localhost";
    5 $db['default']['username'] = "root";
    6 $db['default']['password'] = "";
    7 $db['default']['database'] = "crud";
    8 $db['default']['dbdriver'] = "mysql";
  3. Base url configuration. file: CodeIgniter\system\application\config\config.php
    1 $config['base_url'] = "";
  4. Default controller configuration. file: CodeIgniter\system\application\config\routes.php
    1 $route['default_controller'] = "person";
  5. Model. create file CodeIgniter\system\application\models\personModel.php. Here we are using active record class.
    01 class PersonModel extends Model {
    02     // table name
    03     private $tbl_person= 'tbl_person';
    05     function Person(){
    06         parent::Model();
    07     }
    08     // get number of persons in database
    09     function count_all(){
    10         return $this->db->count_all($this->tbl_person);
    11     }
    12     // get persons with paging
    13     function get_paged_list($limit = 10, $offset = 0){
    14         $this->db->order_by('id','asc');
    15         return $this->db->get($this->tbl_person, $limit, $offset);
    16     }
    17     // get person by id
    18     function get_by_id($id){
    19         $this->db->where('id', $id);
    20         return $this->db->get($this->tbl_person);
    21     }
    22     // add new person
    23     function save($person){
    24         $this->db->insert($this->tbl_person, $person);
    25         return $this->db->insert_id();
    26     }
    27     // update person by id
    28     function update($id, $person){
    29         $this->db->where('id', $id);
    30         $this->db->update($this->tbl_person, $person);
    31     }
    32     // delete person by id
    33     function delete($id){
    34         $this->db->where('id', $id);
    35         $this->db->delete($this->tbl_person);
    36     }
    37 }
  6. Controller. create file CodeIgniter\system\application\controllers\person.php
    001 <?php
    002 class Person extends Controller {
    004     // num of records per page
    005     private $limit = 10;
    007     function Person(){
    008         parent::Controller();
    010         // load library
    011         $this->load->library(array('table','validation'));
    013         // load helper
    014         $this->load->helper('url');
    016         // load model
    017         $this->load->model('personModel','',TRUE);
    018     }
    020     function index($offset = 0){
    021         // offset
    022         $uri_segment = 3;
    023         $offset = $this->uri->segment($uri_segment);
    025         // load data
    026         $persons = $this->personModel->get_paged_list($this->limit, $offset)->result();
    028         // generate pagination
    029         $this->load->library('pagination');
    030         $config['base_url'] = site_url('person/index/');
    031         $config['total_rows'] = $this->personModel->count_all();
    032         $config['per_page'] = $this->limit;
    033         $config['uri_segment'] = $uri_segment;
    034         $this->pagination->initialize($config);
    035         $data['pagination'] = $this->pagination->create_links();
    037         // generate table data
    038         $this->load->library('table');
    039         $this->table->set_empty("&nbsp;");
    040         $this->table->set_heading('No', 'Name', 'Gender', 'Date of Birth (dd-mm-yyyy)', 'Actions');
    041         $i = 0 + $offset;
    042         foreach ($persons as $person){
    043             $this->table->add_row(++$i, $person->name, strtoupper($person->gender)=='M'? 'Male':'Female', date('d-m-Y',strtotime($person->dob)),
    044                 anchor('person/view/'.$person->id,'view',array('class'=>'view')).' '.
    045                 anchor('person/update/'.$person->id,'update',array('class'=>'update')).' '.
    046                 anchor('person/delete/'.$person->id,'delete',array('class'=>'delete','onclick'=>"return confirm('Are you sure want to delete this person?')"))
    047             );
    048         }
    049         $data['table'] = $this->table->generate();
    051         // load view
    052         $this->load->view('personList', $data);
    053     }
    055     function add(){
    056         // set validation properties
    057         $this->_set_fields();
    059         // set common properties
    060         $data['title'] = 'Add new person';
    061         $data['message'] = '';
    062         $data['action'] = site_url('person/addPerson');
    063         $data['link_back'] = anchor('person/index/','Back to list of persons',array('class'=>'back'));
    065         // load view
    066         $this->load->view('personEdit', $data);
    067     }
    069     function addPerson(){
    070         // set common properties
    071         $data['title'] = 'Add new person';
    072         $data['action'] = site_url('person/addPerson');
    073         $data['link_back'] = anchor('person/index/','Back to list of persons',array('class'=>'back'));
    075         // set validation properties
    076         $this->_set_fields();
    077         $this->_set_rules();
    079         // run validation
    080         if ($this->validation->run() == FALSE){
    081             $data['message'] = '';
    082         }else{
    083             // save data
    084             $person = array('name' => $this->input->post('name'),
    085                             'gender' => $this->input->post('gender'),
    086                             'dob' => date('Y-m-d', strtotime($this->input->post('dob'))));
    087             $id = $this->personModel->save($person);
    089             // set form input name="id"
    090             $this->validation->id = $id;
    092             // set user message
    093             $data['message'] = '<div>add new person success</div>';
    094         }
    096         // load view
    097         $this->load->view('personEdit', $data);
    098     }
    100     function view($id){
    101         // set common properties
    102         $data['title'] = 'Person Details';
    103         $data['link_back'] = anchor('person/index/','Back to list of persons',array('class'=>'back'));
    105         // get person details
    106         $data['person'] = $this->personModel->get_by_id($id)->row();
    108         // load view
    109         $this->load->view('personView', $data);
    110     }
    112     function update($id){
    113         // set validation properties
    114         $this->_set_fields();
    116         // prefill form values
    117         $person = $this->personModel->get_by_id($id)->row();
    118         $this->validation->id = $id;
    119         $this->validation->name = $person->name;
    120         $_POST['gender'] = strtoupper($person->gender);
    121         $this->validation->dob = date('d-m-Y',strtotime($person->dob));
    123         // set common properties
    124         $data['title'] = 'Update person';
    125         $data['message'] = '';
    126         $data['action'] = site_url('person/updatePerson');
    127         $data['link_back'] = anchor('person/index/','Back to list of persons',array('class'=>'back'));
    129         // load view
    130         $this->load->view('personEdit', $data);
    131     }
    133     function updatePerson(){
    134         // set common properties
    135         $data['title'] = 'Update person';
    136         $data['action'] = site_url('person/updatePerson');
    137         $data['link_back'] = anchor('person/index/','Back to list of persons',array('class'=>'back'));
    139         // set validation properties
    140         $this->_set_fields();
    141         $this->_set_rules();
    143         // run validation
    144         if ($this->validation->run() == FALSE){
    145             $data['message'] = '';
    146         }else{
    147             // save data
    148             $id = $this->input->post('id');
    149             $person = array('name' => $this->input->post('name'),
    150                             'gender' => $this->input->post('gender'),
    151                             'dob' => date('Y-m-d', strtotime($this->input->post('dob'))));
    152             $this->personModel->update($id,$person);
    154             // set user message
    155             $data['message'] = '<div>update person success</div>';
    156         }
    158         // load view
    159         $this->load->view('personEdit', $data);
    160     }
    162     function delete($id){
    163         // delete person
    164         $this->personModel->delete($id);
    166         // redirect to person list page
    167         redirect('person/index/','refresh');
    168     }
    170     // validation fields
    171     function _set_fields(){
    172         $fields['id'] = 'id';
    173         $fields['name'] = 'name';
    174         $fields['gender'] = 'gender';
    175         $fields['dob'] = 'dob';
    177         $this->validation->set_fields($fields);
    178     }
    180     // validation rules
    181     function _set_rules(){
    182         $rules['name'] = 'trim|required';
    183         $rules['gender'] = 'trim|required';
    184         $rules['dob'] = 'trim|required|callback_valid_date';
    186         $this->validation->set_rules($rules);
    188         $this->validation->set_message('required', '* required');
    189         $this->validation->set_message('isset', '* required');
    190         $this->validation->set_error_delimiters('<p>', '</p>');
    191     }
    193     // date_validation callback
    194     function valid_date($str)
    195     {
    196         if(!ereg("^(0[1-9]|1[0-9]|2[0-9]|3[01])-(0[1-9]|1[012])-([0-9]{4})$", $str))
    197         {
    198             $this->validation->set_message('valid_date', 'date format is not valid. dd-mm-yyyy');
    199             return false;
    200         }
    201         else
    202         {
    203             return true;
    204         }
    205     }
    206 }
    207 ?>
  7. View. create 3 files at CodeIgniter\system\application\views folder. personList.phpto list persons with pagination
    01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    02 <html xmlns="">
    03 <head>
    04 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    06 <title>SIMPLE CRUD APPLICATION</title>
    08 <link href="<?php echo base_url(); ?>style/style.css" rel="stylesheet" type="text/css" />
    10 </head>
    11 <body>
    12     <div class="content">
    13         <h1>Simple CRUD Application</h1>
    14         <div class="paging"><?php echo $pagination; ?></div>
    15         <div class="data"><?php echo $table; ?></div>
    16         <br />
    17         <?php echo anchor('person/add/','add new data',array('class'=>'add')); ?>
    18     </div>
    19 </body>
    20 </html>

    personEdit.php to add or update a person

    01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    02 <html xmlns="">
    03 <head>
    04 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    06 <title>SIMPLE CRUD APPLICATION</title>
    08 <link href="<?php echo base_url(); ?>style/style.css" rel="stylesheet" type="text/css" />
    10 <link href="<?php echo base_url(); ?>style/calendar.css" rel="stylesheet" type="text/css" />
    11 <script type="text/javascript" src="<?php echo base_url(); ?>script/calendar.js"></script>
    13 </head>
    14 <body>
    15     <div class="content">
    16         <h1><?php echo $title; ?></h1>
    17         <?php echo $message; ?>
    18         <form method="post" action="<?php echo $action; ?>">
    19         <div class="data">
    20         <table>
    21             <tr>
    22                 <td width="30%">ID</td>
    23                 <td><input type="text" name="id" disabled="disable" class="text" value="<?php echo $this->validation->id; ?>"/></td>
    24                 <input type="hidden" name="id" value="<?php echo $this->validation->id; ?>"/>
    25             </tr>
    26             <tr>
    27                 <td valign="top">Name<span style="color:red;">*</span></td>
    28                 <td><input type="text" name="name" class="text" value="<?php echo $this->validation->name; ?>"/>
    29                 <?php echo $this->validation->name_error; ?></td>
    30             </tr>
    31             <tr>
    32                 <td valign="top">Gender<span style="color:red;">*</span></td>
    33                 <td><input type="radio" name="gender" value="M" <?php echo $this->validation->set_radio('gender', 'M'); ?>/> M
    34                     <input type="radio" name="gender" value="F" <?php echo $this->validation->set_radio('gender', 'F'); ?>/> F
    35                     <?php echo $this->validation->gender_error; ?></td>
    36             </tr>
    37             <tr>
    38                 <td valign="top">Date of birth (dd-mm-yyyy)<span style="color:red;">*</span></td>
    39                 <td><input type="text" name="dob" onclick="displayDatePicker('dob');" class="text" value="<?php echo $this->validation->dob; ?>"/>
    40                 <a href="javascript:void(0);" onclick="displayDatePicker('dob');"><img src="<?php echo base_url(); ?>style/images/calendar.png" alt="calendar" border="0"></a>
    41                 <?php echo $this->validation->dob_error; ?></td>
    42             </tr>
    43             <tr>
    44                 <td>&nbsp;</td>
    45                 <td><input type="submit" value="Save"/></td>
    46             </tr>
    47         </table>
    48         </div>
    49         </form>
    50         <br />
    51         <?php echo $link_back; ?>
    52     </div>
    53 </body>
    54 </html>

    personView.php to view a person details

    01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    02 <html xmlns="">
    03 <head>
    04 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    06 <title>SIMPLE CRUD APPLICATION</title>
    08 <link href="<?php echo base_url(); ?>style/style.css" rel="stylesheet" type="text/css" />
    10 </head>
    11 <body>
    12     <div class="content">
    13         <h1><?php echo $title; ?></h1>
    14         <div class="data">
    15         <table>
    16             <tr>
    17                 <td width="30%">ID</td>
    18                 <td><?php echo $person->id; ?></td>
    19             </tr>
    20             <tr>
    21                 <td valign="top">Name</td>
    22                 <td><?php echo $person->name; ?></td>
    23             </tr>
    24             <tr>
    25                 <td valign="top">Gender</td>
    26                 <td><?php echo strtoupper($person->gender)=='M'? 'Male':'Female' ; ?></td>
    27             </tr>
    28             <tr>
    29                 <td valign="top">Date of birth (dd-mm-yyyy)</td>
    30                 <td><?php echo date('d-m-Y',strtotime($person->dob)); ?></td>
    31             </tr>
    32         </table>
    33         </div>
    34         <br />
    35         <?php echo $link_back; ?>
    36     </div>
    37 </body>
    38 </html>
  8. Style. put stylesheet at CodeIgniter\style\style.css and style’s images at CodeIgniter\style\images folder

    001 body {
    002     font-family:tahoma;
    003     padding:0px;
    004     margin:0px;
    005     background:#f5f5f5
    006 }
    008 div.content {
    009     padding:10px 20px;
    010 }
    011 div.content h1 {
    012     font-size:18pt;
    013     border-bottom:5px solid #a00;
    014     padding:0px;
    015     margin:10px 0px 20px;
    016     width:80%;
    017 }
    019 div.content table {
    020     border:2px solid #000;
    021     background:#fff;
    022     width:80%;
    023 }
    024 div.content table td {
    025     font-size:10pt;
    026     padding:5px 10px;
    027     border-bottom:1px solid #ddd;
    028     text-align: left;
    029 }
    030 div.content table th {
    031     text-align: left;
    032     font-size: 8pt;
    033     padding: 10px 10px 7px;
    034     text-transform: uppercase;
    035     color: #fff;
    036     background:url(images/head.gif) left -5px repeat-x;
    037 }
    039 div.paging {
    040     font-size: 9pt;
    041     margin:5px 0px;
    042 }
    043 div.paging a {
    044     color:#900;
    045     text-transform: uppercase;
    046     text-decoration: none;
    047 }
    048 div.paging a:hover {
    049     color:#c00;
    050 }
    051 div.paging b {
    052     color:#900;
    053 }
    055 div.success {
    056     font-size:14pt;
    057     background:url(images/accept.png) left 5px no-repeat;
    058     padding:0px;
    059     padding-left:20px;
    060     margin:0px 0px 10px;
    061     color:#060;
    062     width:80%;
    063 }
    065 a.update, a.delete, a.add, a.view, a.back {
    066     font-size: 9pt;
    067     color:#900;
    068     font-wight:bold;
    069     padding-left:20px;
    070     text-decoration: none;
    071 }
    072 a.update {
    073     background:url(images/update.png) left center no-repeat;
    074 }
    075 a.delete {
    076     background:url(images/delete.png) left center no-repeat;
    077 }
    078 a.add {
    079     background:url(images/add.png) left center no-repeat;
    080 }
    081 a.view {
    082     background:url(images/view.png) left center no-repeat;
    083 }
    084 a.back {
    085     background:url(images/prev.gif) left center no-repeat;
    086 }
    087 a.update:hover, a.delete:hover, a.add:hover, a.view:hover {
    088     color:#000;
    089 }
    091 input.text {
    092     border:2px solid #aaa;
    093 }
    095 .error {
    096     background: #FBE6F2 none repeat scroll 0 0;
    097     border: 1px solid #D893A1;
    098     color: #333333;
    099     margin: 5px 0 0;
    100     padding: 5px;
    101     font-size: 10px;
    102     font-family: Lucida Grande,Verdana,Geneva,Sans-serif;
    103 }
  9. Script. put script at CodeIgniter\script folder
  10. Done. Lets preview what should we have by now.
list_of_personList of persons with pagination

add_new_personAdd new person

update_personUpdate person

view_personView person details

error_validationError on validation

Download Simple CRUD Application. Happy Programming!!