Earthman Web & Media » Wordpress

WordPress Plugin Development Essentials: New Premium Course

Jeffrey Way — Tue, 06 Dec 2011 19:24:11 +0000

So you’ve wrapped your mind around the process of creating WordPress themes, and now you want to take things to the next level? In that case, it’s time to begin learning how to create plugins for WordPress. In this Tuts+ Premium course, we start from the absolute basics, and work our way up to more advanced topics and techniques.

With hours of training, and nearly fifty videos, I’ll teach you, step by step, how to work with shortcodes, widgets, custom post types, WP Cron, and much more. If you’re unfamiliar with Tuts+ Premium, for $19 a month, you gain access to hundreds upon hundreds of tutorials, an entire catalog of ebooks from Rockable Press and Smashing Magazine, and our new courses section (to be updated a few times every month).

If you’re on the fence, try signing up for a single month, and see how it goes! We have a 30-day, no questions asked, money back promise.

Questions?

If you have any questions about the Tuts+ Premium service, just leave a comment; I’d be glad to help out any way that I can.

The Magic of WordPress Custom Post Types: New on Premium

Jeffrey Way — Wed, 19 Oct 2011 19:14:02 +0000

In this in depth Premium video tutorial, I’ll teach you how to use custom post types, taxonomies, and meta boxes to extend your WordPress application into CMS-like territory.

Become a Premium member to read this tutorial/screencast, as well as hundreds of other advanced tutorials and screencasts from the Tuts+ network.

You’ll Learn About…

What are custom post types, and why would you want to use them?
How to take advantage of custom taxonomies to provide additional grouping and filtering functionality
How to use custom meta boxes to save and display custom meta information for a specific post type.
Implement nonces to provide additional security.
New PHP 5.3 features, such as anonymous functions and closures.
Plenty more…

Become a Premium member to read this tutorial/screencast, as well as hundreds of other advanced tutorials and screencasts from the Tuts+ network. For more WordPress tutorials every day, be sure to subscribe to our sister-site, WPtuts+!

Create a Multi-Layout Portfolio with WordPress

Sumeet Chawla — Tue, 31 May 2011 18:11:50 +0000

WordPress, as a content management system, is often used for creating portfolio websites. With the evolution of user interface design and functionalities, a new trend has emerged: displaying portfolio items in different layouts. This tutorial details the process of creating a dedicated portfolio section in WordPress’ backend, and using jQuery and CSS3 to display the portfolio in a classy manner.

In this tutorial, we are going to extensively use powerful features of WordPress, such as custom posts, custom taxonomies, and we’ll also write a function to fetch our own custom excerpts.

Step 1 - Installing WordPress and Initializing the Theme.

The first step in creating our portfolio website is to install WordPress. This is a simple task, and, even better, most web hosts out there provide one click installers. However, if you are new to this, here is an awesome guide to help you out with the installation.

Once the installation has completed, we should next create our custom theme which will display our portfolio. There are various methods for creating custom themes. Some prefer to create a new blank white template, while others choose to create child themes of the new TwentyTen template. For this tutorial, we will use the Starker's theme, by Elliot Jay Stocks. It's a completely blank theme with no styling; it’s a great base to build our theme on. Edit the styles.css file, and change the theme name referenced at the top. To install the theme, simply paste the theme folder in thewp-content > themes folder. Once the theme is installed, you can activate it by going to the themes page.

Step 2 - Planning the Layout

Our portfolio site will not contain much data. A basic portfolio site contains images of the projects, some tags to identify the projects, and a short description of each. The multi-layout theme will function in such a way that the user can select between a grid and list layout. Like many multi layout websites available, we are not going to load a different page when the user clicks on the list view or the grid view. Instead, we’ll use AJAX to asynchronously load in the new viewer. This is the basic design of how our portfolio site will appear in grid mode:

Once the user clicks on the list view control, the whole layout will smoothly change to a list view which will contain the title of the project, the tags associated with it, and a short description.

Step 3 - Setting up the Backend

For our portfolio, we need to register a custom post type, called “project.” We can customize every aspect of a WordPress post. For example, we can change the labels involved, select various features for the post like comments, thumbnails, excerpts, etc.

To implement a custom post, edit the functions.php file located within the theme folder. It contains a lot of predefined code, as the naked Starkers theme provides some functionalities of the default TwentyTen template. Don’t be scared or confused; you can append the following code either at the bottom or top of the functions.php file.

Don’t leave any empty space at the end of the functions.php file.

We hook our custom function to the initialization (init) action in the following way:

/*--- Creating custom post type for project --*/
add_action('init', 'project_custom_init');

This project_custom_init method will be used to register the custom post type in the WordPress database.

You can learn in detail about the method involved in registering a custom post type here.

The register_post_type method requires a name for the custom post, and a set of arguments, which define the characteristics of the custom post. Firstly, we need to define the labels for the custom post. These labels will be used for the custom post in the WordPress admin.

/*-- Custom Post Init Begin --*/
function project_custom_init()
{
  $labels = array(
    'name' => _x('Projects', 'post type general name'),
    'singular_name' => _x('Project', 'post type singular name'),
    'add_new' => _x('Add New', 'project'),
    'add_new_item' => __('Add New Project'),
    'edit_item' => __('Edit Project'),
    'new_item' => __('New Project'),
    'view_item' => __('View Project'),
    'search_items' => __('Search Projects'),
    'not_found' =>  __('No projects found'),
    'not_found_in_trash' => __('No projects found in Trash'),
    'parent_item_colon' => '',
    'menu_name' => 'Project'

  );

Once we’ve defined the labels, we need to define the set of arguments for the custom post type. The labels array defined earlier is going to be an argument as well. Once the arguments are defined, we register the custom post type as “project”.

 $args = array(
    'labels' => $labels,
    'public' => true,
    'publicly_queryable' => true,
    'show_ui' => true,
    'show_in_menu' => true,
    'query_var' => true,
    'rewrite' => true,
    'capability_type' => 'post',
    'has_archive' => true,
    'hierarchical' => false,
    'menu_position' => null,
    'supports' => array('title','editor','author','thumbnail','excerpt','comments')
  );
  // The following is the main step where we register the post.
  register_post_type('project',$args);
}
/*-- Custom Post Init Ends --*/

Create Custom Messages for the 'Project' Post

We can also optionally add custom messages for the custom post type. These messages will be displayed in the WordPress dashboard when we edit or update the custom post. We can do this by creating a filter for the post updated messages in the following manner:

// Add filter to ensure the text Project, or project, is displayed when a user updates a book
add_filter('post_updated_messages', 'project_updated_messages');
function project_updated_messages( $messages ) {
  global $post, $post_ID;

  $messages['project'] = array(
    0 => '', // Unused. Messages start at index 1.
    1 => sprintf( __('Project updated. View project'), esc_url( get_permalink($post_ID) ) ),
    2 => __('Custom field updated.'),
    3 => __('Custom field deleted.'),
    4 => __('Project updated.'),
    /* translators: %s: date and time of the revision */
    5 => isset($_GET['revision']) ? sprintf( __('Project restored to revision from %s'), wp_post_revision_title( (int) $_GET['revision'], false ) ) : false,
    6 => sprintf( __('Project published. View project'), esc_url( get_permalink($post_ID) ) ),
    7 => __('Project saved.'),
    8 => sprintf( __('Project submitted. Preview project'), esc_url( add_query_arg( 'preview', 'true', get_permalink($post_ID) ) ) ),
    9 => sprintf( __('Project scheduled for: %1$s. Preview project'),
      // translators: Publish box date format, see http://php.net/date
      date_i18n( __( 'M j, Y @ G:i' ), strtotime( $post->post_date ) ), esc_url( get_permalink($post_ID) ) ),
    10 => sprintf( __('Project draft updated. Preview project'), esc_url( add_query_arg( 'preview', 'true', get_permalink($post_ID) ) ) ),
  );

  return $messages;
}

Registering a Custom Taxonomy

We next need to define a custom taxonomy for the tags to be used with each of the portfolio items. You can learn more about the register taxonomy method here.

// Initialize New Taxonomy Labels
  $labels = array(
    'name' => _x( 'Tags', 'taxonomy general name' ),
    'singular_name' => _x( 'Tag', 'taxonomy singular name' ),
    'search_items' =>  __( 'Search Types' ),
    'all_items' => __( 'All Tags' ),
    'parent_item' => __( 'Parent Tag' ),
    'parent_item_colon' => __( 'Parent Tag:' ),
    'edit_item' => __( 'Edit Tags' ),
    'update_item' => __( 'Update Tag' ),
    'add_new_item' => __( 'Add New Tag' ),
    'new_item_name' => __( 'New Tag Name' ),
  );
// Custom taxonomy for Project Tags
register_taxonomy('tag',array('project'), array(
    'hierarchical' => false,
    'labels' => $labels,
    'show_ui' => true,
    'query_var' => true,
    'rewrite' => array( 'slug' => 'tag' ),
  ));

Return to your WordPress dashboard, and open the media settings from the settings tab. Here, you have to set the default size for the portfolio image thumbnails. You’ll also notice in the sidebar that the “Project” custom post type has been successfully registered, along with the custom taxonomy, “tags.” We can register the default thumbnail size using the set_post_thumbnail method, but I’ll demonstrate another way to achieve this. You can learn more about how to set post thumbnail sizes programmatically here.

Create Demo Portfolio Items

Create some demo portfolio items by going to projects and clicking on add new. We require a title for the project, the content, and a thumbnail. We can see that a tag section has also appeared and confirms that our custom taxonomy was successfully registered. Add some tags for the portfolio items, as well.

Step 4 Coding and Styling The Template

Coding the static template

To create the theme, we will first create a static HTML/CSS3 template for the website. This separates the two tasks of making the website look consistent with the design, and fetching the content from the database. Coding the theme directly may be a bit confusing for beginners sometimes – specially, if a lot of content is present in the theme. Create three folders, named
“css”, “images” and “js,” respectively. The general structure for the main content area will be like so:


	
		
			
		
		
			
				
				Grid
				List
				
			
			
				 
					
						
						
							
						
						View Details
					
					
						
						Project Title
						Tags, Tags
						 The Project Description / Excerpt

Style the Template

Styling the template is dependent on you. You can experiment with different colors and images to suit your needs. But for this template, we are going to create a dark grunge theme and use some fun CSS3 to achieve those subtle hover effects and transparency. The slicing up of the design into images is rather. As such, I won’t go over the details here.

body{
	background: #5a5a5a url('images/bg.jpg') no-repeat center top;
	height: 100%;
}
a{
	text-decoration: none;
	color: #C2FC48;
}
a:hover{
	color:#fff;
}
.clear{
	clear: both;
}
#page-wrap{
	width: 960px;
	position: relative;
	margin: 0 auto 40px;
}
#header{
	height: 111px;
	padding: 0 10px 0 50px;
}
#header h1{
	float:left;
}
#header h1 a{
    font-family: Georgia,Arial,Helvetica,sans-serif;
    font-size: 48px;
    position: relative;
    text-decoration: none;
    text-shadow: 2px 2px 1px #000000;
    top: 64px;
    width: auto;
    z-index: 1000;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
#header h1 a:hover{
	color:#f4f6f0;
}
ul#social{
	float: right;
	top: 95px;
	position:relative;
}
ul#social li{
	float: left;
	margin-right: 10px;
	display: inline;
}
ul#social li a{
	width: 16px;
	height: 16px;
	display: block;
	background-image: url('images/layout-icons.png');
	text-indent: -99999px;
}
ul#social li a.feed{
	background-position: -16px 32px;
}
ul#social li a.facebook{
	background-position: 0 32px;
}
ul#social li a.twitter{
	background-position: 0 16px;
}

The basic styling for the main container and the layout controls are as follows

/*--Main Content Styles Start here --*/
#main-content{
	padding: 50px 50px 28px 50px;
	background-color: #000;
	border-bottom: 1px #696969 solid;
	border-left: 1px #696969 solid;
	border-right: 1px #696969 solid;
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0, 0, 0);
	/* RGBa with 0.3 opacity */
	background: rgba(0, 0, 0, 0.3);
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	color:#c7c7c7;
	line-height: 16px;
}
#main-content a:hover{
	color: #fff;
}
#layout-controls{
	margin-bottom: 15px;
}
#layout-controls span{
	width: 20px;
	height: 26px;
	display: block;
	background-image: url('images/layout-icons.png');
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	text-indent: -99999px;
}
#layout-controls a{
	width: 20px;
	height: 26px;
	display: block;
	float: left;
	background-image: url('images/layout-icons.png');
	margin-right: 10px;
	display: inline;
}
#layout-controls a.grid span{
	background-position: left 0;
}
#layout-controls a.grid{
	background-position: left -26px;
}
#layout-controls a.list span{
	background-position: right 0;
}
#layout-controls a.list{
	background-position: right -26px;
}
#layout-controls a:hover span{
	opacity: 0; /* other browsers */
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); /* this works in IE6, IE7, and IE8 */
}

The following are the general styles for the project list. We will later do specific styling for each grid layout mode and a list layout mode depending on the current class of the folio list.

/*-------------General Folio Styles Starts Here---------------*/
ul#folio li a{
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
ul#folio li{
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0, 0, 0);
	/* RGBa with 0.3 opacity */
	background: rgba(0, 0, 0, 0.3);
	padding: 20px;
	border: 1px #4c4c4c solid;
	margin-bottom: 22px;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
ul#folio li:hover{
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(0, 0, 0);
	/* RGBa with 0.3 opacity */
	background: rgba(0, 0, 0, 0.1);
}
ul#folio li .image{
	text-align: center;
}
ul#folio li .image span{
	width: 158px;
	height: 116px;
	display: block;
	overflow: hidden;
	background-color: #fff;
	margin-bottom: 10px;
}
ul#folio li .image span a{
	width: 158px;
	height: 116px;
	display: block;
}
ul#folio li .image a{
	font-weight: bold;
}

Also make note that we are not using the general opacity method of achieving transparency using CSS3. Using the opacity method also affects the children of the parent container on which the opacity is applied. Instead, we are using the RGBa method of adding background colors to the container, and using the alpha value to control the transparency of the container.

You can read more about the RGBa Property in this awesome article.

This does not affect the transparency of the children elements. We also need to create IE specific CSS code to support the alpha transparency.

In the HTML structure, you will notice that there is a class given to the portfolio list.

Basically, the “grid” class is used to display the list in a grid view and the “list” class is used to display the list in a list view. In the grid mode, all the extra content is hidden from the user, and in the list mode, all the content is visible to the user. We have two separate sets of styling for each mode. The styles for the grid mode are as follows:

/*------------------Grid Layout Starts Here-------------------*/
ul#folio.grid li{
	width: 158px;
	height: 130px;
	float: left;
	margin-right: 19px;
	display: inline;
}
ul#folio.grid li .content{
	display: none;
}
ul#folio.grid li .image span a{
	width: 158px;
	height: 116px;
	display: block;
}
ul#folio.grid li.rightmost{
	margin-right: 0;
}

List mode styles are as follows. At any moment, only one of the grid or list styles is active.

/*------------------List Layout Starts Here-------------------*/
ul#folio.list li{
	display: block;
}
ul#folio.list li .image,ul#folio li.details .image{
	width: 158px;
	height: 130px;
	float:left;
}
ul#folio.list li .content{
	float: left;
	padding: 0 10px 0 40px;
	width: 598px;
}
ul#folio.list li .content h2,ul#folio li.details .content h2{
	font-size: 24px;
	color: #C2FC48;
	margin-bottom: 6px;
	font-family: Georgia, Arial, Helvetica, sans-serif;
}
ul#folio.list li .content span.tags,ul#folio li.details .content span.tags{
	color: #fff;
	font-size: 11px;
	font-style: italic;
	margin-bottom: 10px;
	display: block;
}

Use jQuery to Add Effects

We next will use jQuery UI to change the class of the folio list with respect to the layout button clicked by the user. We’re detecting the click event of the layout control buttons, fetching the current class and the new class to be activated, and then using the add and remove class methods to change the classes. We also have a set of parameters which define the speed of the events taking place.

	var animateSpeed = 500;
	jQuery("#layout-controls a").click(function(){
               var folio = jQuery('#folio'),
		     curClass = folio.attr('class'),
		     newClass = jQuery(this).attr('class');

		folio.fadeOut(animateSpeed,function(){
			folio
                          .removeClass(curClass,animateSpeed);
			  .addClass(newClass,animateSpeed);
		}).fadeIn(animateSpeed);
		return false;
	});

Step 5 Integration with the WordPress Theme

Now that we have completed the static version of the site, we can integrate it with the WordPress theme in a matter of minutes. All we need to do is loop through the posts using a wp_query object with a query for the custom post type. Then, we place the content in the respective position in the template.

Edit `header.php`

First, we need to modify the header.php template, and include our custom JavaScript files. In this tutorial, we’ll include jQuery using the Google’s CDN version. We will deregister the jQuery provided by WordPress, and register Google’s CDN version of jQuery. Paste the following snippet in your functions.php file.

Move the css, js and images folders – that you created previously for the static template – to the WordPress theme folder. Insert the jQuery UI custom file, and the main script file in the header. Make sure it is inserted below the wp_head method.

Create the Main Template

Now, you can either create another template in the theme – for example, page-home.php – or you can modify the index.php already present in the theme folder. If you choose the former method, then:

Create a page
Set the page’s template as the template you just created.
Go to the reading settings in the settings tab.
Select the homepage as a static one.
Select the page you just created as the homepage.

The template will first contain the header, which you can call using the get_header() method, then the main content, which you will code within the template itself. Lastly, the footer, which you can be included, via the get_footer() method.

The following code demonstrates how you can create a custom query using the wp_query object.

 'project', 'posts_per_page' => -1));
  $count =0;
?>

We are using a variable, count to count the number of items in the list. We need this because we will keep only four items in each row and assign a ‘rightmost‘ class to every fourth list element. The ‘rightmost‘ class eliminates any right margin to the list elements. Alternatively, we could, in our CSS file, use the li:nth-child(4n) selector.

The following code shows how we can loop through the posts and insert the content, as required.


	
		have_posts() ) : $loop->the_post(); ?>

Inside the loop, we insert the content in the normal WordPress way, using the $loop wp_query object, of course. The following code shows how we can fetch the thumbnail of the project post and insert it into the template. Make proper note of how we use the $count variable to insert the ‘rightmost‘ class on every fourth list element.

		
				
					
						
							
						
					
					View Details

Now comes the content section where we need to insert the title, tags, short description and fetch the excerpt for the post with a custom excerpt method. Inserting the title is rather easy, as are the tags. Remember, we previously created a custom taxonomy by the name of tags.

				
					
					
						 'name', 'order' => 'ASC', 'fields' => 'names');
							echo implode(wp_get_object_terms( $post->ID, 'tag', $args),', ');
						?>

You will notice that we are not using the general the_excerpt() method, provided by WordPress. Instead, we are defining our own custom method by adding some filters. The general excerpt method returns a greater length of excerpt than we require. Hence, the custom version. We’re also modifying the ‘Continue Reading…’ text added at the end of the default excerpt, and replacing it with ‘Read More’. The following snippet serves our purpose. This custom excerpt method comes in handy for plenty of situations.

Read more';
}
function folio_excerpt($length_callback='', $more_callback='') {
    global $post;
    if(function_exists($length_callback)){
        add_filter('excerpt_length', $length_callback);
    }
    if(function_exists($more_callback)){
        add_filter('excerpt_more', $more_callback);
    }
    $output = get_the_excerpt();
    $output = apply_filters('wptexturize', $output);
    $output = apply_filters('convert_chars', $output);
    $output = ''.$output.'';
    echo $output;
}
?>

Step 6 Conclusion

The above method of creating a multi-layout portfolio is quite simple, and uses basic CSS and jQuery tricks to achieve the result. Even better, these techniques can be applied to a variety of projects. Other techniques in this tutorial, like custom post types, custom taxonomies and adding filters to the excerpt method, can be used in various other innovative ways, as well!

Create WordPress Plugins with OOP Techniques

Muhammad Haris — Thu, 19 May 2011 20:06:27 +0000

Object-oriented code, among other things, can help organize and add reusability to your code. In this tutorial, I will teach you the basics of writing a WordPress plugin using object oriented techniques. We’ll be using Dribbble’s API as an example for this tutorial. Ready?

What We’re Going to Learn:

Benefits of using OOP for WordPress plugins.
How to setup a shortcode.
How to setup a template tag.
How to enable shortcode in WordPress widgets.
Real-world example by using Dribbble’s API.

Why Use OOP?

Before moving forward with this tutorial, you should have at least an elementary understanding of writing a WordPress plugin. Jonathan has written an amazing tutorial on “How to write a WordPress Plugin”. Give it a read.

Creating WordPress plugins with object oriented code is quite efficient and tidy, when compared to using procedural code. It’s easier to manage the code base, and expand it using inheritance techniques, which can be particularly helpful when writing a large plugin.

Dribbble

To write a WordPress plugin, we first need a sense of direction. We’re going to write a plugin that will display the latest shots from Dribbble, using their REST API. We’ll then add shortcode support for posts and widgets, and template tag for themes.

Step 1 - Setting up the Plugin Class

Object oriented code is based on classes and methods (functions). Let’s create our core class, which will interact with WordPress’ hooks and filters.

class WPDribbble {
	public function __construct()
	{
	}
}

$wpDribbble = new WPDribbble();

PHP classes have a constructor function, __construct, which is executed as soon as a new instance of a class is instantiated. All WordPress hooks and filters will be registered under the constructor of our plugin class. Lets push ahead and register a shortcode for our plugin. The add_shortcode() function/hook will go under the constructor function.

The new instance of a class/object is registered using the new keyword. Refer to the last line in the code below.

class WPDribbble {
	public function __construct()
	{
		add_shortcode('Dribbble', array($this, 'shortcode'));
	}

	public function shortcode()
	{
	}
}

$wpDribbble = new WPDribbble();

add_shortcode – The first parameter is the shortcode tag, and the second is the callback function.

Notice how we’re using an array in the callback function parameter? To register callback functions inside an object, we have to use an array.

The first item of the array references the object, via $this. The second item in the array is the method name within the class. All hooks and filters have to be referenced like this when inside a class.

Still Confused?

# 1. Standard usage
add_shortcode('shortcode_name', 'shortcode_func');

function shortcode_func()
{
 // Contents of this function will execute when the blogger
// uses the [shortcode_name] shortcode.
}

# 2. With PHP 5.3, we can pass an anonymous function.
add_shortcode('shortcode_name', function() {
   // Contents of this function will execute when the blogger
  // uses the [shortcode_name] shortcode.
});

#3. Within a class
class WPDribbble {
	public function __construct()
	{
		add_shortcode('Dribbble', array($this, 'shortcode'));
	}

	public function shortcode()
	{
           // Contents of this function will execute when the blogger
          // uses the [shortcode_name] shortcode.
	}
}

Step 2 - Dribbble API Class

Since we currently do not require any fancy API functions, we’re going to create a rather simple API wrapper for Dribbble. There is already a library available for Dribbble, but, for the sake of this tutorial, we’re going to write our own. It’ll help you understand the concepts behind this tutorial.

We’re going to write a DribbbleAPI object, and register a method called getPlayerShots() to interact with Dribbble’s API and return an array of the latest shots.

Let’s create a new file for this class, called DribbbleAPI.php

class DribbbleAPI {
	// url to Dribbble api
	protected $apiUrl = 'http://api.dribbble.com/';

	// Dribbble username or user id
	protected $user;
}

Above, we’re setting up two class variables.

$apiUrl – The link to the Dribbble API, where the calls will be sent.
$user – The username or user id of a Dribbble user. This value will be set from within the constructor (__construct) method.

class DribbbleAPI {
	// url to Dribbble api
	protected $apiUrl = 'http://api.dribbble.com/';

	// Dribbble username or user id
	protected $user;

	public function __construct($user)
	{
		$this->user = $user;
	}
}

The constructor is passed a $user variable, which is then passed on by the constructor to the class property, called user.

We prefix the property, or variable name with public to specify that the value of this property can be retrieved from outside of the class. If we instead wish to limit access to the property to only this class, and perhaps any classes that inherit from it, we’d use the protected prefix. This practice is referred to as encapsulation.

We have the base ready for our Dribbble API wrapper. Now, We’re going to write a new method, called getPlayerShots(). The purpose of this method will be to query the API and convert the result into an array for usage within our plugin.

class DribbbleAPI {
	// url to Dribbble api
	protected $apiUrl = 'http://api.dribbble.com/';

	// Dribbble username or user id
	protected $user;

	public function __construct($user)
	{
		$this->user = $user;
	}

	public function getPlayerShots($perPage = 15)
	{
		$user = $this->user;

		$json = wp_remote_get($this->apiUrl . 'players/' . $user . '/shots?per_page=' . $perPage);

		$array = json_decode($json['body']);

		$shots = $array->shots;

		return $shots;
	}
}

Learn more about wp_remote_get.

The getPlayerShots function retrives the user from the class variable. It uses WordPress’ wp_remote_get function to query the Dribbble API. The API then responds to our query with a JSON string, which is then parsed into an array and sent back to the function using the return keyword.

This is all that we require from the API at the moment – simply an array of player shots. If we happen to require more functionality in the future, we can either add more methods to the current class, or create a new class that extends this one. Again, this is referred to as inheritance.

Step 3 – Integrating the `DribbbleAPI` Class

This is the fun part; the freshly baked DribbbleAPI class will come into use. We’re going to loop through the shots retrived from the API, and generate an html list of shots, which will be passed on to the shortcode and the template tag. During the loop, the full-sized Dribbble images will be cached and saved in the plugin folder, and the thumbnails will be generated using TimThumb.

To determine if the full images are already stored locally, the plugin path is required. Also, to generate the thumbnails with timthumb, the plugin url is required. For this purpose, we’ll create two class variables called pluginPath and pluginURL in our WPDribbble class, and then set their values from within the constructor method.

Setting PluginPath and PluginUrl

class WPDribbble {
	protected $pluginPath;
	protected $pluginUrl;

	public function __construct()
	{
		// Set Plugin Path
		$this->pluginPath = dirname(__FILE__);

		// Set Plugin URL
		$this->pluginUrl = WP_PLUGIN_URL . '/wp-Dribbble';

		add_shortcode('Dribbble', array($this, 'shortcode'));
	}

`getImages()` Method

Create a new method within the WPDribbble class, called getImages.

Inside a class, you can use generic names for functions. They will not conflict with other plugins or WordPress’ built-in functions, because they are under the class namespace.

public function getImages($user, $images = 3, $width = 50, $height = 50, $caption = true)
{
}

$user – Username or User ID of Dribbble. $user will be used when registering a new instance of the DribbbleAPI class.
$images – Number of images to render. $images will be used when querying the API through the getPlayerShots method.
$width and $height – Timthumb will be used to generate thumbnails.
$caption – Option to render title of an image.

Next, we’re going to include the DribbbleAPI class in the getImages() function, and create a new instance of it to grab the images.

public function getImages($user, $images = 3, $width = 50, $height = 50, $caption = true)
{
	include 'DribbbleAPI.php';

	$DribbbleAPI = new DribbbleAPI($user);
	$shots = $DribbbleAPI->getPlayerShots($images);

	if($shots) {
	}
}

The $shots variable in the code is populated with an array of three recent Dribbbles from the $user.

As mentioned previously, we’re going to loop through the $shots array, and save the full size images locally for caching purposes. The cached images will be used with TimThumb to serve the thumbnails. For storing full-images and thumbnails generated by TimThumb, create two folders. We’ll use full-images/ for storing the full size images, and cache/ for the thumbnails, since that is the default folder name for TimThumb.

The HTML for the list will be generated within the $shots loop.

public function getImages($user, $images = 3, $width = 50, $height = 50, $caption = true)
{
	include 'DribbbleAPI.php';

	$DribbbleAPI = new DribbbleAPI($user);
	$shots = $DribbbleAPI->getPlayerShots($images);

	if($shots) {
		$html[] = '';

		foreach($shots as $shot) {
			$image = $shot->image_url; // url of the image
			$fileName = $shot->id . '.png'; // generating a filename image_id.png

			if (!file_exists($this->pluginPath . '/full-images/' . $fileName)) { // check if the full image exists
				$rawImage = wp_remote_get($image); // get the full image
				$newImagePath = $this->pluginPath  . '/full-images/' . $fileName;
				$fp = fopen($newImagePath, 'x');
				fwrite($fp, $rawImage['body']); // save the full image
				fclose($fp);
			}

			// generate thumbnail url
			$localImage = $this->pluginUrl . '/timthumb.php?src=' . strstr($this->pluginPath, 'wp-content') . '/full-images/' . $fileName . '&w=' . $width . '&h=' . $height . '&q=100';

			if($caption) { // if caption is true
				$captionHTML = '' . $shot->title . '';
			}

			// combine shot url, title and thumbnail to add to the ul list
			$html[] = 'title . '" />'.$captionHTML.'';
		}

		$html[] = '';

		return implode("\n", $html);
	}
}

Adding Classes

It’s always a good idea to add classes to each element of your plugin. This provides the advanced users of your plugin with the freedom to customize it. Avoid using inline CSS for content that is generated through your plugin.

Step 4 – Setting up the Shortcode

Shortcodes, as the name suggests, allows users to easily add complex content into blog posts.

We already have the add_shortcode hook ready in our plugin class constructor. Now, we’re going to write the shortcode method inside our class, which will exract the shortcode attributes and return the Dribbble images by using the getImages() method.

We’ll be calling our shortcode [Dribbble]. As mentioned previously, the name of the shortcode is determined by the first parameter in the add_shortcode function. It will be used with the attributes required for the getImages() method. For example: [Dribbble user=haris images=5 width=100 height=100 caption=true].

public function shortcode($atts)
{
	// extract the attributes into variables
	extract(shortcode_atts(array(
		'images' => 3,
		'width' => 50,
		'height' => 50,
		'caption' => true,
	), $atts));

	// pass the attributes to getImages function and render the images
	return $this->getImages($atts['user'], $images, $width, $height, $caption);
}

Add Shortcode support for WordPress Widgets

By default, WordPress widgets don’t support shortcodes, however, by using the widget_text filter, we can force shortcode support in WordPress widgets.

We can add the filter in our WPDribbble object constructor.

public function __construct()
{
	// Set Plugin Path
	$this->pluginPath = dirname(__FILE__);

	// Set Plugin URL
	$this->pluginUrl = WP_PLUGIN_URL . '/wp-Dribbble';

	add_shortcode('Dribbble', array($this, 'shortcode'));

	// Add shortcode support for widgets
	add_filter('widget_text', 'do_shortcode');
}

Step 5 Setting up the Template Tag

The template tag can be used directly in WordPress themes. The basic purpose of the template tag will be to create a new instance of our WPDribbble class, and call the getImages() method. The template tag will be a simple PHP function and it has to be registered outside the plugin class. It needs to have a unique name; otherwise, it will conflict with functions / plugins with similiar name. Since our plugin is called WP-Dribbble, we’ll call the template tag, wp_Dribbble().

function wp_Dribbble($user, $images = 3, $width = 50, $height = 50, $caption = true)
{
	$wpDribbble = new WPDribbble;
	echo $wpDribbble->getImages($user, $images, $width, $height, $caption);
}

Voila!

Congratulations! You have successfully written a WordPress plugin with OOP. If you have any questions, let me know, and I’ll do my best to help you. .

Deploy your WordPress Blog to the Cloud

Jarkko Laine — Mon, 16 May 2011 16:02:45 +0000

Advertise here

For the last decade, hosting a large scale web application has been a daunting task, reserved only for experts. Not anymore; when Amazon opened its server architecture, everything changed. Computer hardware moved to the cloud, and became available to any and all developers. In this tutorial, we will install WordPress in the cloud.

Introduction

Most blogs and small business web sites are hosted on shared hosting services, where you pay a fixed monthly fee in exchange for a predefined set of features and installed software. Most of the time, it’s a perfectly valid option, but running your blog in Amazon’s cloud comes with benefits that make it an option worth considering:

Easy to upgrade. Creating a new server machine in Amazon’s cloud can be accomplished in a matter of minutes. So by using the service, you are always prepared to handle instant jumps in traffic. If a post jumps to the front page of Digg or Reddit, you can add more servers and balance the load. accordingly.
Cost-efficient power for large scale services. If your site attracts a lot of users, and eventually outgrows the limits of your regular hosting, Amazon Web Services gives you free hands in designing a server architecture that matches your needs, in a cost-efficient way, without needing to hire a complete network operations team to do the setup for you! This is how many of the most popular Facebook developers have built their servers.
Total control over the setup: Though this point might not be too important when running WordPress, if you want to get adventurous and build your next project using something more exotic than a combination of PHP and MySQL, you don’t have to ask your web hosting company. You install the software you wish, just like you would on a server of your own.

Whether or not hosting your WordPress site on Amazon is the right choice depends on the traffic your blog receives, as well as how much you value the opportunity to configure your server exactly to your needs.

If you’re still curious, read on and give it a shot. You will be amazed at how quickly you can get a server up and running!

Step 1 - Create an Amazon Web Services Account

Before you can start using Amazon’s cloud for your web hosting needs, you need to create an account with Amazon Web Services (AWS). Point your browser to aws.amazon.com and click on the “Sign Up Now” button.

If you’ve used Amazon.com before, you can use your same e-mail and password to login to AWS. You can also create a new account by choosing “I am a new user.”

At this stage, you will need to enter your contact information and credit card number so that Amazon can bill you for any services you use. Creating an account is free, though everything else will cost you money.

The pricing model is rather simple — you pay for every hour your server is running — but because of the variety of options, calculating the actual price can get quite a bit more complex than that. When running your own site at Amazon, it’s best to be careful and double check your price calculations before leaving the servers running unattended so you don’t get any surprises at the end of the month.

Building our WordPress setup shouldn’t last but an hour, and we will stop everything when we’re finished, so the price for completing the tutorial will be close to zero.

Step 2 - Launch Your First Server Machine

Our server setup will consist of two parts:

Application server hosted on Amazon’s Elastic Computing Cloud (EC2), running Apache and PHP, with WordPress installed on it.
MySQL database hosted on Amazon’s Relational Database Service (RDS).

Another cheaper, but more difficult, option would be to manually install the MySQL server on the same machine with Apache and PHP. In this tutorial, I decided to go with the Relational Database Service because of its ease of use, as well as the fact that, this way, Amazon will take care of backups and maintenance for the database, and you won’t have to worry about that level of additional security.

Let’s start by creating our first application server instance.

Click on the EC2 tab in the AWS Management Console. As this is your first time using the EC2 service, you will need to separately sign up for it. Click on the “Sign Up For Amazon EC2″ button:

As a special step, Amazon will verify your identity by placing a call to your phone. The whole process is automated: you type a code from the web page into your phone and, once the system has verified that the codes match, you will be redirected to the next page.

When you are finished with the sign up process, return to the Management Console and the EC2 tab. You will see a page that looks like this. Click on the “Launch Instance” button.

A popup with a list of Amazon Machine Images (AMIs) opens.

AMIs are snapshots of running computers.

Most consist of an operating system and a few utilities, but you can create AMIs with as much complexity as you wish — even containing your full application, ready to be started on a virtual machine with a click of a button.

We will pick the most basic option: “Basic 32-bit Amazon Linux AMI 1.0.” Click on “Select” next to the AMI and you are ready to go.

After selecting the AMI, our next step is to decide what kind of hardware we will use to run it. Depending on whether you picked a 32-bit or a 64-bit AMI, you will see a different list, the 32-bit AMIs offering the cheaper options.

For testing, we don’t need much memory or processing power, so we will start with a Micro instance. Select the instance type and click “Continue.”

In the next screen, the defaults do just fine. Click “Continue.”

When you have many machines with different roles, it’s easy to get lost with the machines and end up spending a lot of time searching for the right machine. Naming the machines helps a lot. In our case, naming is not too important, as we will run only one EC2 instance, but let’s give it a name anyhow. Enter your desired name and click “Continue.”

Next, you will be asked to create a key pair file for securely connecting to the machine. The key replaces a password when connecting to the machine with SSH. Name your key pair file, and click on “Create & Download your Key Pair.” Copy the key pair file to a safe location (A good place, if you are on a Unix system such as Mac OSX or Linux, is ~/.ssh). After copying the file, change its permissions to 400:

 chmod 400 wordpress_demo.pem

If you are using Windows, you probably use PuTTY for SSH. PuTTY uses its own key format (ppk), so you will need to convert the key to that format by using the Puttygen tool available at the PuTTY download page.

After you’ve created the key pair, you will still be asked to configure the firewall for your new machine. By default, no one is allowed to connect to the machine — every port is closed. Let’s open ports 22 (SSH) and 80 (HTTP), so we can configure the machine over SSH and access the blog from a browser. Select the type of connection from the drop down list at the bottom of the popup and click on “Add Rule.” When you are done with the setup, click “Continue.”

Review the configuration, and, if everything appears to be correct, click “Launch.”

Now the machine is launching! Close the popup to return to the dashboard. At first, you’ll notice that the instance’s status is set to “pending,” and within a couple of minutes it switches to “running.” This means the server is up and running — you can start using it.

When the machine is running, it can be accessed through the ports you defined in the firewall configuration. Let’s use SSH to connect to the machine and finish its setup by installing Apache, PHP, the MySQL extension to PHP, and finally WordPress.

Step 3 - Install Required Server Software

Right click on the name of the machine, and select “Connect” from the drop down list. A popup with an SSH command will open.

Highlight the command, and copy it to a console if you are using a Mac or a Unix machine. The command will be similar to the following:

 ssh -i wordpress_demo.pem root@ec2-....compute-1.amazonaws.com

If you saved your pem key to ~/.ssh, update the path in the command. Also, you’ll need to change root into ec2-user — Amazon hasn’t yet updated the command to match its new AMI setups that don’t allow connecting with the root user.

If you are on Windows, or prefer to use a more graphical SSH application, simply copy the name of the machine and open it in your SSH application of choice. Remember to use the user name ec2-user and the related key pair file (wordpress_demo.pem).

Once logged in, you can use the virtual machine just as you would use any Linux machine.

To install software, we will use an easy to use installer called Yum. First, to install the Apache web server, type the following command:

 sudo yum install httpd

The installer asks you to confirm the package to install and possibly some other steps as well. Reply with “Y” to every question, and, in no time at all, you will have Apache installed.

Next up, PHP:

 sudo yum install php

And the same for the MySQL extensions:

 sudo yum install php-mysql

That’s it: the setup is done and we are ready to test Apache. Start it with this command (you can later replace “start” with “stop” or “restart” depending on what you want the web server to do):

 sudo /etc/init.d/httpd start

The web server is up, and you can test it by copying the URL of the machine to your browser:

Step 4 - Create the Database Machine

Before installing WordPress, we still need a database. Setting up a database using RDS is as easy as entering some values to a couple of settings screens and pressing a few buttons, so let’s get started.

In your AWS console, switch to the RDS tab. As you have never used the service before, you will be asked to enable it. This time, the process is much faster and simpler than when you enabled EC2. Click on “Sign Up For Amazon RDS” to get started.

Follow the process through and, when you are finished, head back to the RDS tab in the AWS console. The screen you will see looks a lot like the EC2 console we used in the previous step. Click “Launch DB Instance.”

In the popup that opens, you can choose the properties for the database server to start, such as the server instance and storage space to allocate. Let’s pick the smallest values as they are more than enough for our simple test.

Pick a name for you database server and the root user on it. I used “wordpress-db” as the database server name and “root” / “rootpass” as master login. Not the most secure of options, mind you, but this machine is not intended to last for long, so it’s okay in this instance.

After setting up the database server information, you will be asked to define a default database to be created on the server. We will call it “wordpress” to follow the WordPress conventions. The rest of the settings on this screen can be left untouched.

On the next screen, you can define settings for database backups. For now, leave the values to their defaults and click “Continue.”

After verifying the settings, click “Launch DB Instance.”

Creating a database instance takes quite a bit longer than creating the EC2 instance, but after about five minutes of waiting, you should see the database instance as “available” on the instances tab.

Click on the instance to see more data about it, then copy the “endpoint” value. This is the URL of the database server that we will use in the WordPress setup.

There is one more step before we can move on to installing WordPress: we need to configure the firewall for this database so that the application server can access it.

Still on the RDS tab in the AWS console, click on “DB Security Groups.” You will see that there are no authorizations yet:

To give our application server access to the database, we need to authorize its security group to this database security group. Select “EC2 Instance” from the drop down list below “No Authorizations” and enter the name of the security group (“wordpress_app_server“) and your Amazon Account ID to the two text fields that appear next to the drop down list.

The account ID is hidden quite deep in the AWS settings: you’ll find it by first clicking the “Account” link at the top of the page, and then the “Security Credentials” link on the page that opens.

After you’ve entered the required information and clicked “Add,” you will see the security group as authorized. We are ready to install WordPress.

Step 5 - Install WordPress

If you are not connected to the application server anymore, open an SSH connection to it again. We’ll start by downloading WordPress on the machine. By default, Apache is configured to look for HTML files from /var/www/html/, so let’s download WordPress to that directory.

 cd /var/www/html

To make things easier in the future, we will change ec2-user to be the owner of that directory:

 sudo chown ec2-user .

You can download WordPress to your own computer and upload it from there using SCP, but I find it easier to download it directly to the Amazon machine using wget:

 wget http://wordpress.org/latest.zip

This way, the WordPress package goes straight to its final location and all you need to do is to unzip it:

 unzip latest.zip

We are about ready to start configuring the blog. As our last step in the command line, change permissions of the wordpress directory that was just created so that the installation script can create the wp-config.php file:

 chmod o+w wordpress

Now, open the WordPress URL in your browser (The URL of the EC2 instance followed by /wordpress). Click on “Create a Configuration File” and then on the next page “Let’s go!”

You will end up on a page for entering the database settings. Enter the database name, user name and password, and the URL of the RDS instance. Then click “Submit.”

You are almost set. Configure the rest of the blog details to finish the installation and enjoy your newly created blog.

You have successfully installed WordPress in the cloud!

Step 6 Stop Everything

As I mentioned at the beginning of this tutorial, AWS billing is based on the hours of usage, so to make sure you are not billed for time that you are not really using, make sure to stop everything once you are done testing.

First, stop the EC2 instance by selecting it from the admin, right clicking on it and choosing “Stop.” If you later decide to start the machine again, all you need is to click on “Start” in the same drop down list and the machine will resume from where you left it.

Stopping the database is just as easy, with the exception that you can’t resume the database again. That’s not so nice, but luckily you have the choice to save a snapshot of the data while stopping the database. You can later use this data to recreate the database setup whenever you need it again.

On the RDS tab, right click on your database instance and select “Delete.”

Verify that everything is stopped and log out of the AWS console. Your blog is gone, just as fast as it started.

Thanks for reading! I hope you learned a bit!

Scaling WordPress for High-Traffic

Ryan Allen — Tue, 01 Mar 2011 17:15:53 +0000

Just because you didn’t get to go to that awesome conference doesn’t mean that you can’t still watch the lectures! Each week, we feature one recommended web development lecture on Nettuts+.

This talk, presented by Envato’s very own developer extraordinaire, Ryan Allen, will detail some of the potential pitfalls and solutions when maintaining massive WordPress blogs, like Tuts+.

Please note that Ryan has a unique (but hilarious) sense of humor.

Presentation Links

Innovative Uses of WordPress Post Types and Taxonomies

Adam Murray — Mon, 07 Feb 2011 02:46:26 +0000

With the release of WordPress 3.0, two great ways to better organize and display content were introduced: post types and taxonomies. These two advances improve WordPress’ role as an all-around content management system, and they continue to prove that WP is not just a blog platform. When 3.1 releases with post formats, it will be imperative that you understand how to use and implement post types and taxonomies.

What We’re Going to Cover

In this tutorial, I will talk you through the following:

Overview of post types and taxonomies in WordPress 3.0
How to integrate post types and taxonomies into your themes
Real-world examples of how to use post types and taxonomies in innovative ways within your projects

By the time you’ve completed these steps, I hope to fuel your projects by examining other awesome ways to integrate these organizational elements in WordPress.

A Quick Overview of WordPress Post Types

When you think of post types, the important word to remember is organization. The post type itself will not add really any functionality, but it allows us to better organize WordPress content and build admin dashboards that are more specific to the type of site that we are working with.

Here are some important things to remember when working with post types:

When you create a new post type, a new upper level nav element will appear the main left side admin menu. From there, all of the standard post and page editors are available.
The URL string for a new post type will be : http://yoursite.com/{post-type}/{title}/.
You can create post type archive pages just like you do with categories, and you can even create special template files by creating an archive-{post-type}.php file.

“In the same way that posts are shown on their own archive with archive.php, custom post types will use archive-{posttype}.php.”

For other info on integrating post types, querying post types, and overall functions, visit the codex here.

Integrating Post Types via Functions.php

Integrating post types is simply a matter of including the register_post_type function. Once you have included this in your functions.php file, your nav menu should go from something like this:

to this:

In order to create custom post types, open your template’s functions.php file in an editor, and place the following function within the file:


function create_post_type() {
	register_post_type( 'mysite_reviews',
		array(
			'labels' => array(
				'name' => __( 'Reviews' ),
				'singular_name' => __( 'Review' )
			),
		'public' => true,
        'menu_position' => 5,
        'rewrite' => array('slug' => 'reviews')
		)
	);
}

add_action( 'init', 'create_post_type' );

Broken down, this adds the function create_post_type, and registers the post type mysite_reviews,


add_action( 'init', 'create_post_type' );
function create_post_type() {
	register_post_type( 'mysite_reviews',

You may wonder why I’ve named the post_type mysite_reviews, and not just reviews. I made the name more conspicuous in order to make sure that my post type wouldn’t interfere with custom post type names from other plugins or themes.

Another friendly reminder, your custom post types must not exceed 20 characters, as that is limit of the database column.

Here is a summary of the important post type parameters I’ve set above:

labels – WordPress allows us to label everything from the post type’s name to the label for adding new posts. A complete list can be found here. In the above function, I labeled the name of the post type and its singular name.
public – If set to true
menu_position – I set this to 5, which will place the post type directly under “Posts”. The other placements are as follows: null (below Comments), 0 (below Media), 20 (below Pages), 60 (below first separator) and 100 (below second separator)
rewrite – So that our actual term “mysite_reviews” doesn’t get put in the URL, we set the slug to “reviews” which will be much better in the long run for our visitors, links, and SEO.

For More Information

A full list of parameter arguments for post types can be found here.

Displaying Post Types in WordPress Themes

Since WordPress post types are simply an extension of the existing classification system, displaying them in a theme is quite similar to what is already in place. There are currently three primary ways to display custom post types in your themes:

Post Query
Single Post Template
Archive Template

Displaying via Post Query

To display the new post type mysite_reviews, you will want to open up the template file that you would like to display it on (in my case, I usually create a custom home.php for templates), and enter the following code:

$args = array( 'post_type' => 'mysite_reviews', 'posts_per_page' => 10 );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
	the_title();
	echo '';
	the_excerpt();
	echo '';
endwhile;

This simply creates a new WordPress loop that will display the title and excerpt from the 10 most recent entries in the mysite_reviews post type.

Displaying via Single Post Template

Just as you can customize the way individual posts are displayed via a theme’s single.php file, you can customize the way your individual post type entries are displayed. The easiest way to do this is to create a duplicate of your theme’s single.php file and rename it to single-{posttypename}.php. From there, you can customize that file to your specs. Using the example from above, we would need a single post template named single-mysite_reviews.php.

Displaying by Archive Template

While this feature will not be available until WP 3.1 releases, post types can also be displayed archive-style by creating a file in your theme named archive-{posttypename}.php. So, if we were creating an archive for the post type, we would create an archive template named archive-mysite_reviews.php and place it within our template folder.

With custom post type templating, custom theme creators can more easily create subscription and membership sites by restricting the content on these specific posts and pages to specified user groups.

A Quick Overview of WP Taxonomies

I won’t go into too much detail here as Paul Kaiser has already written a great overview of taxonomies and the code that is involved to implement the function (see the tutorial here). The key word to remember when thinking about taxonomies is classification. They are similar to tags, but allow for deeper, more content-specific classification.

In truth, they are an extremely powerful way to group various items in all sorts of ways.

For example, say that I have use the Reviews post type from above. Because I will definitely want to classify that broad post type, I can create taxonomies like:

Movie Reviews
Book Reviews
Product Reviews

With custom taxonomies, I could even go deeper into classifying the above taxonomies. I could go into movie genres, book authors, and product markets. Again, together with post types, these greatly increase WordPress’ content management capabilities.

Integrating Taxonomies via Functions.php

Overall, taxonomies are pretty easy to implement in your functions.php file. Remember, you can go hierarchical with them or treat them like tags, so the more complex you want the greater the difficulty. Either way, here is a quick rundown of how to incorporate these into your theme.

Again, open up your functions.php file and insert the following code:


    function movie_taxonomy() {
       register_taxonomy(
        'movie_review',
        'mysite_reviews',
        array(
            'hierarchical' => true,
            'label' => 'Movie Review',
            'query_var' => true,
            'rewrite' => array('slug' => 'movie-reviews')
        )
    );
    }

    add_action( 'init', 'movie_taxonomy' );

To break this down, first we give the taxonomy a formal name (“movie_review”), and we place it under the post type “mysite_reviews”, which we created earlier.


function movie_taxonomy() {
   register_taxonomy(
	'movie_review',
	'mysite_reviews',

Then we pass these values:


	array(
            'hierarchical' => true,
            'label' => 'Movie Review',
            'query_var' => true,
            'rewrite' => array('slug' => 'movie-reviews')
        )

This supplies the following arguments:

hierarchical – When set to “true”, the taxonomy will act more like a category. There can be parent taxonomies and nested taxonomies allowing for greater depth of classification. When set to “false”, they act like just like tags.
label – As with the post types above, this is the label that the taxonomy will publicly recieve.
query_var – When set to “true” this taxonomy becomes a queryable element.
rewrite – This sets the URL rewrite. Now posts in this taxonomy will be displayed as http://mysite.com/movie-reviews/{post title}/.

The end result within our admin nav should look like this:

Furthermore, we can dive into that interface and add more classification categories and structure. That interface looks similar to the category interface that you may already be familiar with.

From this interface, you can edit the slugs of the various categories within your taxonomy, create new categories, and determine parent and child categories.

For More Information

A full list of parameter arguments for taxonomies can be found here.

Displaying Taxonomies in WordPress Themes

There are currently three primary ways to display custom post types in your themes:

Taxonomy Cloud
Custom Taxonomy Query
Custom Taxonomy List

Taxonomy Cloud

Just as there are tag clouds, there are taxonomy clouds. To make it easy, both tags and clouds use the wp_tag_cloud function. In order to display an array of taxonomy categories in a cloud, we would use the following code:

  'taxonomy_name_1','taxonomy_name_2' ) );
?>

For more information about the function and its parameter arguments, visit the codex.

Custom Taxonomy Query

Taxonomies can also be included in custom queries just like we did with post types above. For example, to display content from the taxonomy movie_genre, we would need to insert the following code into our template file:

    $args = array(
	'tax_query' => array(
		'taxonomy' => 'movie_genre',
		'field' => 'slug',
        'terms' => 'comedy'
		)
);
query_posts( $args );

First, we use the argument tax_query so that we can pass parameters that will allow us to query by slug or terms and return more accurate query results. In this example, we displayed posts tagged as “comedy” within the custom taxonomy “movie_genre”. Once again, like we did with post types, we can limit the number of posts that this query returns.

Custom Taxonomy Lists

To display a comma-delineated list of posts by taxonomy, we simply need to put the following somewhere in the loop:


    	ID, '{taxonomy name}', '{Displayed Title}: ', ', ', ' ' ); ?>

There are other display options for this list, and the parameters can be found here.

Using Post Types and Taxonomies in Your Next Project

Now that we have the nuts and bolts, I think “Why do I care about these things?” is a really fair question. The possibilities with post types and taxonomies, especially working with clients that are often too busy to manage the intricacies of a site, is endless. This, in my opinion, saves time over creating new admin functions and updating plugins, and opens doors to new possibilities with much less work (and coding) involved.

Below are some ideas that I had about how to integrate these into actual work:

1. Review Sites

First, a review site could benefit from the custom templating options listed above (single and archive)

Here are some more post types and taxonomies that you could implement on a review site:

Post Type - Movie Reviews
Taxonomies - Genre, Actor, Director
Post Type - Book Reviews
Taxonomies - Genre, Author, Publisher
Post Type - Product Reviews
Taxonomies - Product Category, Price

2. Real Estate Listing Sites

While there are some good templates for real estate listing sites, post types and taxonomies let creative people make custom templates that can easily be maintained by clients and webmasters alike. Here are just a few ideas to use in your next project:

Post Type - Listings
Taxonomies - Area, Agent, Price, Rooms
Post Type - Agents

3. Event Listings

One thing that WordPress really lacks (in my opinion) is a good event management system. Post types and taxonomies could easily take care of that by offering a system to classify monthly events by location, day, or any other system you can think of.

4. Subscription Sites

With the creation of a new post type and template, you could create a custom, premium category for your blog or website and integrate a payment gateway to create your very own membership site.

5. E-commerce

By creating a product post type and template, you could easily add and display products for sale on your site. In addition, taxonomies would allow for easy product organization.

Where Do We Go From Here?

I hope this tutorial has explained post types and taxonomies in WordPress 3.0, and why they are an extremely valuable resource to implement in your projects. I know that there are many advocates of plugins (and I am a plugin author myself), but I hope that I have made the case that implementing these things is a very simple task and one that will save time for both you and your client in the long run.

The list of ideas above is a small one at best, so I would love to hear how you have implemented them into your projects or maybe some other uses that I didn’t list.

Thank you so much for reading!

Quick Tip: How to Target WordPress Sticky Posts

Jeffrey Way — Tue, 25 Jan 2011 04:31:44 +0000

As of WordPress 2.7, we can now assign “sticky posts.” This feature affords us the ability to “pin” postings to the top of our blog. But, how can we specifically target these sorts of postings from within our stylesheet?

Notice the pretty ribbon that’s attached to this particular posting? That’s thanks to stickied posts!

Adjust the resolution to 720 for maximum clarity.

Subscribe to our YouTube page to watch all of the video tutorials!

WordPress Shortcodes: The Right Way

Siddharth — Tue, 28 Dec 2010 17:27:33 +0000

One of the primary reasons why WordPress is the most popular CMS platform available is the sheer level of customizability that it brings to the table. Today, we’ll review the process of integrating one of those popular features, shortcodes, in the most user friendly way possible, into our theme.

A Visual Crash-Course in Shortcodes

Subscribe to our YouTube page to watch all of the video tutorials!
Watch longer Screencasts on our Blip channel.

A Word From the Author

Even though there are a few trillion options to choose from, WordPress has comfortably taken the crown as the king of CMSs and blogging platforms with its incredible flexibility. A shortcode is one of those features that ratchet up the user friendliness of the system.

However, most implementations still require you to remember the shortcode itself. When you’ve created a masterpiece of a theme, the usability shouldn’t really lag behind. I’ll show you how to create shortcodes and then integrate it with the editor itself, so the user doesn’t have to go poring through your docs just to remember the correct syntax to embed a button. Intrigued? Let’s get started right away!

What Are These Shortco-whamathingies?

It’s called a shortcode and it has been part of the base WordPress installation since it hit version 2.5. Basically, these are similar to the bbcodes used on popular message board software: lightweight markup used to format content.

Here, you can define your own codes to use within your theme. Unlike BBCodes, though, shortcodes are primarily used to shield the user from tedious markup and possible errors. By using a shortcode, for say, a button, the user doesn’t have to remember the complicated markup that needs to be input to create the button. Overall, it’s quite a boost to a theme’s usability and possibly, noob friendliness.

ShortCode Variations

If you’re unfamiliar with the concept of a BBCode, and by extension, shortcode, this is how the simplest version looks:

[my-gallery]

If you’ve ever embedded a gallery with WordPress, you’ve already used a shortcode!

There are two more variations you should also be familiar with.

 [button]Content[/button]

 [link to="www.net.tutsplus.com"]NetTuts+[link]

We’ll implement each of these variations first before moving onto other, busier things.

Each shortcode implementation requires a two-step process:

1: Create the primary handler method
2: Hook up the handler to WordPress

Regardless of the complexity of the shortcode, the core steps remain the same.

Take 1: Replacing Strings

We’ll first learn how to implement the simplest shortcode possible. As a use case, let’s say you end each post with some common signing off text. Copying and pasting might be a simple approach, but you may feel like a luddite doing so. Let’s fix this with some WP niftiness!

Unless otherwise noted, all of the code below goes into functions.php

Step 1: Create the Primary Function

The primary function takes care of the core logic of your shortcode. We’ll need to create this first before proceeding.

 function signOffText() {
    return 'Thank you so much for reading! And remember to subscribe to our RSS feed. ';
}

Step 2: Hook into WordPress

The next step, as you may assume, is to hook into the WordPress system to associate the shortcode with this text. This is done using the add_shortcode method.

add_shortcode('signoff', 'signOffText');

Yes, a single one-liner is all it takes. The first parameter defines the shortcode you’ll be using in the editor, while the the second points to the function we created a moment or so ago.

Note: The add_shortcode method always comes after the handler method.

That should do it. Just type [signoff] into your editor and WordPress will dynamically replace the text as needed.

Take 2: Wrapping Content

Next up, we’re going to take a look at another variation: wrapping some content with some markup. You’d have to use it like so:

[quote]Some text[/quote]

Step 1: Create the Primary Function

The primary function has to be modified a little here. We’re noting that our function receives two parameters: attributes through the atts variable and the content itself through the content variable.

The next step is simply to return the markup wrapped around the selected text.

function quote( $atts, $content = null ) {
	return '"'.$content.'"';
}

Step 2: Hook into WordPress

This step remains the same:

add_shortcode("quote", "quote");

I like to name my shortcodes exactly the same as the primary functions unless the naming gets unwieldy. You may have your own styles so feel free to change the naming scheme. There’s no accepted best practice.

Take 3: Adding Attributes

Finally, we’re going to take a look at adding attributes to the mix as well. You’d have to use it like so:

[link to="www.net.tutsplus.com"]NetTuts+[link]

Step 1: Create the Primary Function

The primary function needs to be refactored to handle all the new functionalities we’re bringing in. First up, we merge the attributes passed in with the shortcode and the attributes we’re expecting. You can read up more on the process here.

The final step, as always, is simply to return the markup we want after filling it up appropriately. Here, I’ve used the data sent with the shortcode to fill in the anchor’s href attribute as well as content.

function link($atts, $content = null) {
	extract(shortcode_atts(array(
		"to" => 'http://net.tutsplus.com'
	), $atts));
	return ''.$content.'';
}

Step 2: Hook into WordPress

This step remains unchanged, but essential. Remember, without this, WordPress has no what to do with the shortcode.

add_shortcode("link", "link");

Kicking Everything Up a Notch

This is where you’d expect this tutorial to end but no, you’ve guessed wrong. As I mentioned earlier, shortcodes take away a lot of pain, but there are few gotchas. For one, the user has to remember the shortcodes he has at his disposal to make meaningful use of them.

If you have just a couple, it’s all good, but with feature laden themes, remembering each one becomes a chore. To rectify this, we’re going to add buttons directly to the TinyMCE interface, so the user can simply click on the button to get it all done.

As an example, I’m going to teach you how to add the second variation to the editor. I’m hoping you can extrapolate this information for the specific functionality you have in mind.

Step 1: Hook into WordPress

The first step in the process is hooking into WordPress and adding our initialization code. The following snippet takes care of that. Remember, all of this needs to be in your functions.php file.

 add_action('init', 'add_button');

We’re asking WordPress to run the function called add_button when the page is initially loaded. add_action is our hook into WordPress’ internals.

Step 2: Create Our Initialization Function

function add_button() {
   if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )
   {
     add_filter('mce_external_plugins', 'add_plugin');
     add_filter('mce_buttons', 'register_button');
   }
}

This tiny snippet of code will be executed when the page loads. Above, we’re checking whether the user has the necessary authorization to edit a page or a post before proceeding.

Once that’s done, we hook up two of our [to be written] functions to specific filters. Both of these actually hook into TinyMCE’s front end architecture through WordPress. The first is executed when the editor loads the plugins while the second is run when the buttons are about to be loaded.

In the example above, we proceed regardless of which mode the editor is in. If you want to display it only when the editor is in, say, visual mode, you’ll need to perform a quick check. If get_user_option('rich_editing') evaluates to true, you’re in visual mode. Otherwise, HTML mode. I typically tend to add these buttons only under visual mode but feel free to mix and match here.

Step 3: Register Our Button

function register_button($buttons) {
   array_push($buttons, "quote");
   return $buttons;
}

The function merely adds our shortcode to the array of buttons. You can also add a divider between your new button and the previous buttons by passing in a | before.

Step 4: Register Our TinyMCE Plugin

function add_plugin($plugin_array) {
   $plugin_array['quote'] = get_bloginfo('template_url').'/js/customcodes.js';
   return $plugin_array;
}

The snippet above lets TinyMCE, and WordPress, know how to handle this button. Here, we map our quote shortcode to a specific JavaScript file. We use the get_bloginfo method to get the path to the current template. For the sake of organization, I’m keeping my tinyMCE plugin along with my other JS files.

Step 5: Write the TinyMCE Plugin

Now onto the final portion of our endeavour. Remember, the following code goes into a file called customcodes.js placed in the JS directory of your theme. If you thought it went into functions.php like all the code above, no cookie for you!

(function() {
    tinymce.create('tinymce.plugins.quote', {
        init : function(ed, url) {
            ed.addButton('quote', {
                title : 'Add a Quote',
                image : url+'/image.png',
                onclick : function() {
                     ed.selection.setContent('[quote]' + ed.selection.getContent() + '[/quote]');

                }
            });
        },
        createControl : function(n, cm) {
            return null;
        },
    });
    tinymce.PluginManager.add('quote', tinymce.plugins.quote);
})();

Looks a little complex but I assure you, it’s anything but. Let’s break it down into smaller section to make it easier for us to parse.

First order of the day is a quick closure to keep from polluting the global namespace. Inside, we call the create method to create a new plugin passing in the name and other assorted attributes. For the sake of brevity, I’m just going to call my plugin quote.

Once inside, we define the init function that’s executed upon initialization. ed points to the instance of the editor while url points to the URL of the plugin code.

Most of the attributes should be fairly self explanatory. Note that the image you pass in is relative to the parent folder of the JS file that holds the code. Here it’d be theme directory/js.

Next up, we create the event handler for this button through the onclick function. The one-liner it contains essentially gets the selected text, if any, and wraps it with out shortcode. setContent and getContent are helper methods provided by tinyMCE to manipulate the selected text.

Finally, in the last line, we add the freshly created plugin to tinyMCE’s plugin manager. Pay attention to the names you’re using in each step. It’s error prone if you’re not paying attention. And that’s about it! We’re done! Load up the editor and make sure your spiffy new button is working.

Conclusion

And there you have it. We’ve successfully integrated shortcodes into a WordPress theme in a very user friendly manner. Hopefully you’ve found this tutorial to be of help. Feel free to reuse this code elsewhere in your projects and chime in within the comments if you need any assistance.

Questions? Nice things to say? Criticisms? Hit the comments section and leave me a comment. Happy coding and thank you so much for reading!

How to Create a FAQ Page with WordPress and Custom Post Types

Sumeet Chawla — Fri, 03 Dec 2010 15:38:19 +0000

In the web world, a FAQ page is created specifically for the viewers/customers, and contains general questions and their respective answers about a particular product or service. This tutorial details the process of creating a dedicated FAQ section in the WordPress backend with custom post types, as well as how to spice up the actual page a bit by using jQuery and CSS.

To accomplish our goal, we require a dedicated custom FAQ WordPress post type. That way, we can use the title and the content of these posts to display the FAQs in an innovative and user-friendly way.

Step 1: Installing WordPress

To begin creating the FAQ page, we, of course, must first install WordPress on our localhost. Installing WordPress is a piece of cake; however, if you’re new to this, here is a guide that details the process.

The TwentyTen template is the default theme that ships with WordPress.

Once WordPress is ready to go, we should next create our custom theme, which will implement the FAQ functionality. There are various methods of creating a custom theme. Some prefer to create a new blank white template, while others like to create child themes of the new TwentyTen template. I have been using the Starker’s theme, by Elliot Jay Stocks for a long time now; we’ll use it to create the new theme for our FAQ system.

Download the latest version of the Starker’s blank theme, and move the folder into ‘wp-content/themes’, located within the WordPress installation folder. Also, be sure to rename it to FAQ. Next, login to the backend administration panel of WordPress, click on ‘appearance/themes.’ You will find that the default ‘TwentyTen’ theme is activated, while the new theme, ‘Starkers,’ is listed below it. Activate the Starkers theme.

Upon activation, preview the site to verify that everything is, indeed, working properly. If all went according to plan, the site should look somewhat like the following image:

Step 2: Implementing the FAQ Custom Post

To implement the FAQ system, we are going to create a custom post type solely for this purpose. This will enable us to manage all the FAQs in one place, especially if the FAQ question base increases with time.

To implement a custom post, edit the functions.php file located in the FAQ theme folder. It will contain a good bit of code, so don’t be scared or confused. Scroll down to the bottom and append the following to add a new custom post. We begin by creating hooking a custom function to the initialization (init) action.

// ADDING CUSTOM POST TYPE FAQ
add_action('init', 'my_custom_init');

This custom function will contain all the metadata for the custom post, and will also register the custom post within the WordPress database. Now, within the function, we are first going to define the labels which will be used in the backend administration panels. By labels, I mean the text that is going to show up in the user interface for adding, editing, and searching the FAQs in the admin panel.

	 $labels = array(
	    'name' => _x('FAQs', 'post type general name'),
	    'singular_name' => _x('FAQ', 'post type singular name'),
	    'add_new' => _x('Add New', 'FAQ'),
	    'add_new_item' => __('Add New FAQ'),
	    'edit_item' => __('Edit FAQ'),
	    'new_item' => __('New FAQ'),
	    'view_item' => __('View FAQ'),
	    'search_items' => __('Search FAQs'),
	    'not_found' =>  __('No FAQs found'),
	    'not_found_in_trash' => __('No FAQs found in Trash'),
	    'parent_item_colon' => ''
	  );

After we’ve defined the labels, we next define the arguments array for the register_post_type method. These arguments contain all the important information which will define the components of our FAQ post. For example, will it have a tag box; an excerpt box? We pass the array of labels defined above as an argument, as well.

	$args = array(
	    'labels' => $labels,
	    'public' => true,
	    'publicly_queryable' => true,
	    'show_ui' => true,
	    'query_var' => true,
	    'rewrite' => true,
	    'capability_type' => 'post',
	    'hierarchical' => false,
	    'menu_position' => 5,
	    'supports' => array('title','editor','thumbnail','custom-fields')
	  );

Now that the arguments are defined, we can register the custom post type using the register_post_type method. You can learn more about this method by referring to its documentation in the WordPress Codex.

function my_custom_init()
{
  $labels = array(
    'name' => _x('FAQs', 'post type general name'),
    'singular_name' => _x('FAQ', 'post type singular name'),
    'add_new' => _x('Add New', 'FAQ'),
    'add_new_item' => __('Add New FAQ'),
    'edit_item' => __('Edit FAQ'),
    'new_item' => __('New FAQ'),
    'view_item' => __('View FAQ'),
    'search_items' => __('Search FAQs'),
    'not_found' =>  __('No FAQs found'),
    'not_found_in_trash' => __('No FAQs found in Trash'),
    'parent_item_colon' => ''
  );
  $args = array(
    'labels' => $labels,
    'public' => true,
    'publicly_queryable' => true,
    'show_ui' => true,
    'query_var' => true,
    'rewrite' => true,
    'capability_type' => 'post',
    'hierarchical' => false,
    'menu_position' => 5,
    'supports' => array('title','editor','thumbnail','custom-fields')
  );
  register_post_type('faq',$args);
}

Check the administration panel to determine if the FAQ type post has, in fact, been added successfully. Hopefully, you’ll see the FAQ tab in the sidebar.

Dummy FAQ Posts

Now go ahead and add some demo FAQs, because we need some data for creating and testing the template. The title of each FAQ post should be the question, and the content will be the answer.

Step 3: Coding the Template

So far, we’ve created FAQ custom posts, as well as inserted a set of sample data. Now, we’ll code the template to display the FAQs, accordingly. The main logic I have used for organizing the template is: use the FAQ’s unique ID to link the question to the answers. Hence, we have two parts in the template: the questions section, listing all the FAQ titles; and the answer section, which displays the content of each of the FAQs.

Find the header.php file, open it, delete the div with an id of “access” at the bottom, and also the paragraph which contains the description of the blog. Now add the following code.

After we retrieve our FAQ post data, we must frame the architecture of how the questions will be displayed. We shall do it in the following manner. All the content is wrapped within a div with an id of “content.”


    
        FAQs
        
            
                
                
                
            
        
    
        Not Found
        Sorry, No FAQs created yet.

The most important part here is where we assign the hyperlink with a value of ‘#answer’ and append the post’s id to it. We can use this to jump to the answers, when clicked.

After we’ve displayed all of the questions, we “rewind” our posts to return to the beginning.

Now we will structure how the answers are going to appear, just below the questions.

You can see that we are going to list the content of each post in a list element. Each list element will have an id of “answers” with the post ID appended to it. This is important: when the question is clicked, the view jumps to the content of the respective post. If you’re working along, preview your site; you should see all the posts listed in the architecture described above.

Step 4: Styling the Template

Styling of the FAQ page depends entirely on your tastes; you can proceed in any manner you wish. If you’re a designer, feel free to skip Step 4. What I have personally implemented is a smooth and clean layout. When the user clicks on the question, the page smoothly scrolls down to the respective answer and highlights it by changing the colour and increasing the font size. To achieve this, we’ll start by styling the template with CSS. We can make use of CSS3 to add some shadows and transition effects, too. Add the following CSS to styles.css.

body{
    background-color: #bcbcbc;
}
.clear {
    clear: both;
}
h1,h2,h3,h4,h5,h6{
    color:#424242;
    font-family:Georgia,Arial,Helvetica,sans-serif;
    text-shadow: #fff 1px 1px 0px;
}
h1 a{
    color:#424242;
    font-size:50px;
    position:relative;
    top:11px;
    font-weight: normal;
    z-index: 100;
}
h3{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}
h4{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}
a{
    color: #3299bb;
    text-decoration: none;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
#page-wrap{
    width: 750px;
    position: relative;
    margin: 0px auto 20px auto;
    padding-top: 50px;
}
#content{
    background-color: #e9e9e9;
    padding: 64px 35px 22px;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-box-shadow: rgba(0,0,0,1) 0px 0px 4px;
    -moz-box-shadow: rgba(0,0,0,1) 0px 0px 4px;
    box-shadow: rgba(0,0,0,1) 0px 0px 4px ;
}
#content p{
    text-align:justify;
    font-size: 12px;
    line-height: 18px;
    margin-bottom: 10px;
}
#questions{
    margin-bottom: 50px;
}
#questions li{
    margin-bottom: 20px;
    color: #3299bb;
    list-style-type: disc;
    list-style-position: inside;
}
#questions ul li a{
    font-weight: bold;
}
#questions ul li a:hover{
    color: #00befd;
}
#questions ul li a:active{
    color: #e78c03;
}
#answers ul li{
    margin-bottom: 30px;
    clear: both;
}
#footer{
    padding-top:5px;
    text-align:center;
}
#footer p{
    color: #424242;
}
#footer a{
    color: #424242;
    font-weight: bold;
}

After styling the page, we should style the current FAQ. Note that we’ve also added a ‘Top’ button to the current FAQ. To create the button, we’ll use a handful of CSS3 properties.

.current-faq{
    background-color: #424242;
    color: #e9e9e9;
    padding:30px 30px 23px;
}
.current-faq h4{
    color: #e9e9e9;
    font-weight: bold;
    font-size:22px;
    text-shadow: #000 1px 1px 0px;
}
.top-button {
    border-top: 1px solid #96d1f8;
    background: #2289a8;
    background: -webkit-gradient(linear, left top, left bottom, from(#3299bb), to(#2289a8));
    background: -moz-linear-gradient(top, #3299bb, #2289a8);
    padding: 4px 8px;
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    border-top-left-radius: 6px;
    -webkit-box-shadow: rgba(0,0,0,1) -1px -1px 0;
    -moz-box-shadow: rgba(0,0,0,1) -1px -1px 0;
    box-shadow: rgba(0,0,0,1) -1px -1px 0;
    text-shadow: rgba(0,0,0,.4) -1px -1px 0;
    color: #ffffff;
    font-size: 11px;
    font-family: Georgia, serif;
    text-decoration: none;
    vertical-align: middle;
    font-weight: bold;
    float: right;
    right:-30px;
    position: relative;
}
.top-button:hover {
    border-top-color: #0b93bd;
    background: #0b93bd;
    color: #ffffff;
}
.top-button:active {
    border-top-color: #e78c03;
    background: #e78c03;
}

Check if the ‘current’ class is working properly by assigning the class to any of the list elements. The current FAQ should look like the following:

Step 5: Adding a Pinch of jQuery UI

We’ll use jQuery UI to add some effects to the page. You can download jQuery UI here. We only need limited use of the whole UI library, hence, downloading only the UI core components will suffice. We also need the jQuery scrollTo plug-in for achieving the smooth scrolling effect — though you could also easily code this functionality on your own. Nonetheless, to save time, you can download the plug-in here.

First, we reference jQuery, the jQuery UI Core files, and the scrollTo plug-in within the header.php file. You can do this by adding the following code just before the wp_head() method.

The wp_enqueue_script statement is needed in order to load jQuery safely.

To enable our desired functionality, we fetch the value of the href attribute from the clicked element (i.e. the question). This value is the id of the list element which contains the answer. Then, we scroll to the list element, and apply the ‘current’ class. jQuery UI will ensure that the class is implemented on the list element smoothly and dynamically.

$(document).ready(function(){
	$("div#questions ul a").click(function(){
		var selected = $(this).attr('href');
		selected += '"'+selected+'"';
		/*--Removing the Current class and the top button from previous current FAQs---*/
		$('.top-button').remove();
		$('.current-faq').removeClass();
		$.scrollTo(selected, 400 ,function(){
			$(selected).addClass('current-faq', 400, function(){
				$(this).append('TOP');
			});
		});
		return false;
	});

As mentioned earlier, we also have a ‘Top’ button which scrolls the page back to the top.

$('.top-button').live('click',function(){
		$(this).remove();
		$('.current-faq').removeClass('current-faq',400,function(){
			$.scrollTo('0px', 800);
		});
		return false;
	})
});

Step 6: Conclusion

What you’ve learned today is merely one way of implementing a FAQ page. WordPress provides the power of custom fields, which can be used to further improve the functionality of the FAQ system. When it comes to adding other features to our FAQ page, your own creativity is the only limit! Feel free to share your ideas in the comments!

Earthman Web & Media » Wordpress

WordPress Plugin Development Essentials: New Premium Course

Questions?

The Magic of WordPress Custom Post Types: New on Premium

You’ll Learn About…

Create a Multi-Layout Portfolio with WordPress

Step 1 - Installing WordPress and Initializing the Theme.

Step 2 - Planning the Layout

Step 3 - Setting up the Backend

Create Custom Messages for the 'Project' Post

Registering a Custom Taxonomy

Create Demo Portfolio Items

Step 4 Coding and Styling The Template

Coding the static template

Project Title

Style the Template

Use jQuery to Add Effects

Step 5 Integration with the WordPress Theme

Edit header.php

Create the Main Template

Step 6 Conclusion

Create WordPress Plugins with OOP Techniques

What We’re Going to Learn:

Why Use OOP?

Dribbble

Step 1 - Setting up the Plugin Class

Still Confused?

Step 2 - Dribbble API Class

Step 3 – Integrating the DribbbleAPI Class

Setting PluginPath and PluginUrl

getImages() Method

Adding Classes

Step 4 – Setting up the Shortcode

Add Shortcode support for WordPress Widgets

Step 5 Setting up the Template Tag

Voila!

Deploy your WordPress Blog to the Cloud

Introduction

Step 1 - Create an Amazon Web Services Account

Step 2 - Launch Your First Server Machine

Step 3 - Install Required Server Software

Step 4 - Create the Database Machine

Step 5 - Install WordPress

Step 6 Stop Everything

Scaling WordPress for High-Traffic

Presentation Links

Innovative Uses of WordPress Post Types and Taxonomies

What We’re Going to Cover

A Quick Overview of WordPress Post Types

Integrating Post Types via Functions.php

For More Information

Displaying Post Types in WordPress Themes

Displaying via Post Query

Displaying via Single Post Template

Displaying by Archive Template

A Quick Overview of WP Taxonomies

Integrating Taxonomies via Functions.php

For More Information

Displaying Taxonomies in WordPress Themes

Taxonomy Cloud

Custom Taxonomy Query

Custom Taxonomy Lists

Using Post Types and Taxonomies in Your Next Project

1. Review Sites

2. Real Estate Listing Sites

3. Event Listings

4. Subscription Sites

5. E-commerce

Where Do We Go From Here?

Quick Tip: How to Target WordPress Sticky Posts

WordPress Shortcodes: The Right Way

A Visual Crash-Course in Shortcodes

A Word From the Author

What Are These Shortco-whamathingies?

ShortCode Variations

Take 1: Replacing Strings

Step 1: Create the Primary Function

Step 2: Hook into WordPress

Take 2: Wrapping Content

Step 1: Create the Primary Function

Edit `header.php`

Step 3 – Integrating the `DribbbleAPI` Class

`getImages()` Method