Wptuts+

Adding Post Series Functionality to WordPress With Taxonomies

Barış Ünver — Wed, 16 May 2012 09:58:08 +0000

Ever wrote a “post series” on your blog? If you did, you probably needed to add the links of the other parts of the series into the latest post you wrote. Each time you finished a new part, you had to update the link list of the other parts. There has to be an easier way, right?

There is. In this article, we’re going to learn how to create the “post series” functionality by using the the taxonomies and shortcodes.

The article contains 3 parts:

Creating the taxonomy
Creating the shortcode
Adding the taxonomies and using the shortcode

I’ll explain almost every line of code, so you can develop it any way you like.

Step 1 Creating the Plugin File

This barely counts as a step: We’ll just create the plugin file and fill in the details of the plugin:

Save this little chunk of code in the file post-series.php or any name you like, into the folder /wp-content/plugins/post-series/.

Step 2 Setting Up Our New Taxonomy: “Series”

WordPress has a not-so-new functionality to create “taxonomies” so we can create more kinds of “classification groups” just like tags or categories (which are the built-in taxonomies of WordPress). We’re going to set up a new taxonomy called “Series” and we’ll be using this new taxonomy in our post series to help us.

First, we need to create a function to register the taxonomy. Let’s call it series_tax:

function series_tax() {
	/* Creating an empty function LIKE A BOSS */
}
add_action('init', 'series_tax', 0);

Take note that we also added an action to make the function run when WordPress is ready.

Next, we’ll be using the native register_taxonomy() function to create our taxonomy. But before that, we should set up the “labels” of the taxonomy:

function series_tax() {
	$labels = array(
		'name' => _x('Series', 'taxonomy general name'),
		'singular_name' => _x('Series', 'taxonomy singular name'),
		'all_items' => __('All Series'),
		'edit_item' => __('Edit Series'),
		'update_item' => __('Update Series'),
		'add_new_item' => __('Add New Series'),
		'new_item_name' => __('New Series Name'),
		'menu_name' => __('Series')
	);
}
add_action('init', 'series_tax', 0);

We didn’t use all the labels – You can find a full reference of taxonomy labels in our article Taking WordPress Custom Taxonomies to the Next Level.

We can register the taxonomy now:

// create the "Series" taxonomy for posts only
function series_tax() {
	$labels = array(
		'name' => _x('Series', 'taxonomy general name'),
		'singular_name' => _x('Series', 'taxonomy singular name'),
		'all_items' => __('All Series'),
		'edit_item' => __('Edit Series'),
		'update_item' => __('Update Series'),
		'add_new_item' => __('Add New Series'),
		'new_item_name' => __('New Series Name'),
		'menu_name' => __('Series')
	);

	register_taxonomy(
		'series',
		array('post'), /* if you want to use pages or custom post types, simply extend the array like array('post','page','custom-post-type') */
		array(
			'hierarchical' => true, /* if set to "true", you can use Series as categories; if set to "false", you can use them as tags! */
			'labels' => $labels,
			'show_ui' => true,
			'query_var' => true,
			'rewrite' => array('slug' => 'series'), /* you may need to flush the rewrite rules at Options -> Permalinks (just update the existing preferences without any change) */
		)
	);
}
add_action('init', 'series_tax', 0);

Congratulations, you just created the first half of your plugin! Now, let’s get to the second half…

Step 3 Creating the Shortcode: `[series]`

In this step, we’re going to build the [series] shortcode. With this shortcode, we’ll be able to insert the list of the series’ posts. We’ll also be able to customize the shortcode with some attributes like “title“, “title_wrap“, “slug“, “id“, “list“, “limit” and “future” which will all be optional.

Let’s start by creating our function:

function series_sc($atts) {
	extract(
		shortcode_atts(
			array(
				"slug" => '',
				"id" => '',
				"title" => '',
				"title_wrap" => 'h3',
				"list" => 'ul',
				"limit" => -1,
				"future" => 'on'
			),
			$atts
		)
	);
}
add_shortcode('series','series_sc');

We now have an empty shortcode with 7 optional attributes! We’ll get to know them while writing the rest of the code but I should explain them now:

slug – The slug of the series, defaults to nothing
id – The ID of the series, defaults to nothing
title – The title of the output, defaults to nothing
title_wrap – The HTML tag to wrap the title with, defaults to “h3“
list – The HTML tag to wrap the post list with, defaults to “ul“
limit – The maximum number of posts, defaults to -1 (all posts)
future – The option to include the future posts or not, defaults to “on“

Next, we’ll code the “find the proper taxonomy” part:

if ($id) {
	// Use the "id" attribute if it exists
	$tax_query = array(array('taxonomy' => 'series', 'field' => 'id', 'terms' => $id));
}
elseif ($slug) {
	// Use the "slug" attribute if "id" does not exist
	$tax_query = array(array('taxonomy' => 'series', 'field' => 'slug', 'terms' => $slug));
}
else {
	// Use posts own Series tax if neither "id" nor "slug" exist
	$terms = get_the_terms($post->ID,'series');
	if ($terms && !is_wp_error($terms)) {
		$tax_query = array(array('taxonomy' => 'series', 'field' => 'slug', 'terms' => $term[0]->slug));
	}
	else {
		$error = true;
	}
}

The “slug” and the “id” work in cooperation but they’re both optional: The shortcode will first look for the “slug“, then it’ll look for the “id“. If there’s no slug and no ID either, the shortcode will try to get the “series” taxonomy of the post that contains the shortcode.

Now, let’s code the “create the title (if it’s specified)” part:

if ($title) {
	// Create the title if the "title" attribute exists
	$title_output = '<'.$title_wrap.' class="post-series-title">'.$title.'';
}

There will be no title if the “title” attribute is not specified. There will be a title with the

tag if the “title_wrap” attribute is not specified. You should change the default of the attribute to something else (like

) if you use something else as subheadings.

Let’s get to the “display the future posts or not” part now:

if ($future == 'on') {
	// Include the future posts if the "future" attribute is set to "on"
	$post_status = array('publish','future');
}
else {
	// Exclude the future posts if the "future" attribute is set to "off"
	$post_status = 'publish';
}

I strongly recommend that you leave the “future” attribute “on” but if you don’t want to list the titles of your future posts (not drafts), you can set it to “off“.

All right, we finished coding the attribute parts (except “limit“). We can now get to the part where we get the posts:

if ($error == false) { /* We are going to close this later */
	$args = array(
		'tax_query' => $tax_query,
		'posts_per_page' => $limit,
		'orderby' => 'date',
		'order' => 'ASC',
		'post_status' => $post_status
	);
	$the_posts = get_posts($args);

The ‘tax_query‘ argument is defined by the $tax_query variable which we created just a minute ago in the “find the proper taxonomy” part.
The ‘posts_per_page‘ argument is defined by the “limit” attribute of the shortcode.
The ‘orderby‘ and ‘order‘ arguments are defined to get the posts listed chronologically – the newest post will be at the bottom of the list.
The ‘post_status‘ argument is defined by the $post_status variable which we also created above, in the “display the future posts or not” part.

Now we’re done with fetching the posts, we can put everything together and create the post list!

	/* if there is more than one post with the specified "series" taxonomy, display the list. if there is just one post with the specified taxonomy, there is no need to list the only post! */
	if (count($the_posts) > 1) {
		// display the title first
		$output = $title_output;
		// create the list tag - notice the "post-series-list" class
		$output .= '<'.$list.' class="post-series-list">';
		// the loop to list the posts
		foreach ($the_posts as $post) {
			setup_postdata($post);
			if ($post->post_status == 'publish') {
				$output .= ''.get_the_title($post->ID).'';
			}
			else {
				/* we can not link the post if the post is not published yet! */
				$output .= 'Future post: '.get_the_title($post->ID).'';
			}
		}
		wp_reset_query();
		// close the list tag...
		$output .= '';
		// ...and return the whole output!
		return $output;
	}
} /* Remember the "if" we did not close?   */

And the final code of our shortcode’s function will be like this:

// The shortcode function of Post Series
function series_sc($atts) {
	extract(
		shortcode_atts(
			array(
				"slug" => '',
				"id" => '',
				"title" => '',
				"title_wrap" => 'h3',
				"list" => 'ul',
				"limit" => -1,
				"future" => 'on'
			),
			$atts
		)
	);
	if ($id) {
		// Use the "id" attribute if it exists
		$tax_query = array(array('taxonomy' => 'series', 'field' => 'id', 'terms' => $id));
	}
	elseif ($slug) {
		// Use the "slug" attribute if "id" does not exist
		$tax_query = array(array('taxonomy' => 'series', 'field' => 'slug', 'terms' => $slug));
	}
	else {
		// Use posts own Series tax if neither "id" nor "slug" exist
		$terms = get_the_terms($post->ID,'series');
		if ($terms && !is_wp_error($terms)) {
			$tax_query = array(array('taxonomy' => 'series', 'field' => 'slug', 'terms' => $term[0]->slug));
		}
		else {
			$error = true;
		}
	}
	if ($title) {
		// Create the title if the "title" attribute exists
		$title_output = '<'.$title_wrap.' class="post-series-title">'.$title.'';
	}
	if ($future == 'on') {
		// Include the future posts if the "future" attribute is set to "on"
		$post_status = array('publish','future');
	}
	else {
		// Exclude the future posts if the "future" attribute is set to "off"
		$post_status = 'publish';
	}
	if ($error == false) {
		$args = array(
			'tax_query' => $tax_query,
			'posts_per_page' => $limit,
			'orderby' => 'date',
			'order' => 'ASC',
			'post_status' => $post_status
		);
		$the_posts = get_posts($args);
		/* if there is more than one post with the specified "series" taxonomy, display the list. if there is just one post with the specified taxonomy, there is no need to list the only post! */
		if (count($the_posts) > 1) {
			// display the title first
			$output = $title_output;
			// create the list tag - notice the "post-series-list" class
			$output .= '<'.$list.' class="post-series-list">';
			// the loop to list the posts
			foreach ($the_posts as $post) {
				setup_postdata($post);
				if ($post->post_status == 'publish') {
					$output .= ''.get_the_title($post->ID).'';
				}
				else {
					/* we can not link the post if the post is not published yet! */
					$output .= 'Future post: '.get_the_title($post->ID).'';
				}
			}
			wp_reset_query();
			// close the list tag...
			$output .= '';
			// ...and return the whole output!
			return $output;
		}
	}
}
add_shortcode('series','series_sc');

Conclusion: Usage Examples

Usage is pretty simple:

Create your “series” from the Posts » Series page (as if you’re creating new categories),
Assign your posts to those “series” while writing (as if you’re choosing categories),
Use the [series] shortcode wherever you want!

You probably noticed this: You can use the shortcode without any attributes – if you’re using it inside your series’ posts:

[series]

But if you want to include series in pages or in a post which is not assigned to the series you’re including, you can use the “slug” or the “id” attributes:

[series slug="wordpress-themes"]
[series id="146"]

Finally, you can limit the number of posts shown, you can set a title and its heading tag, you can change the list to an ordered (numbered) list and you can prevent the future posts to be shown:

[series title="More WordPress Theme Lists" title_wrap="h4" limit="5" list="ol" future="off"]

I don’t want to paste the 100+ lines of the full source code here (the tutorial is already long) but you can download the plugin we created from here. Hope you like it!

Creating a WordPress Network Widget

Kailan Wyatt — Tue, 15 May 2012 10:24:14 +0000

In this tutorial, we are going to create a widget that will display sites from a WordPress Network of sites. This short tutorial will show you how simple it is, to create a widget and use it to navigate to different network sites.

Step 1 Adding the Base for the Widget

Assuming that you have already set up a Network of sites, we will begin by creating a file mynetwork.php. Add the following code for the base to extend the WordPress Widget Class.

/*
Plugin Name: Your Plugin Name Here
Plugin URI: http://yourpluginsite.com
Description: This displays your Blogs in your WP Network
Author: The Author Name Here
Version: 1.0.0
Author URI: http://theauthoraddress.com
*/
class MyNetwork_Widget extends WP_Widget {

	public function __construct() {
		// widget actual processes
	}

	public function form( $instance ) {
		// outputs the options form on admin
	}

	public function update( $new_instance, $old_instance ) {
		// processes widget options to be saved
	}

	public function widget( $args, $instance ) {
		// outputs the content of the widget
	}
}
add_action( 'widgets_init', create_function( '', 'register_widget( "mynetwork_widget" );' ) );

“The function add_action( ‘widgets_init’,”) is used to register our widget”

Step 2 Writing the Construct Function

Now that we have the base of our widget, let’s start adding actual functionalities to it. We’ll start by adding a new object attribute called blogs. This attribute will be used as an array to hold the list of registered blogs on your site.

class MyNetwork_Widget extends WP_Widget {
	public $blogs = null;

Now we will add some small snippets to our __construct function. First we will assign an array of blogs to the object attribute by using the WordPress function get_blog_list. Any time we plan to reference the array, we simply use $this->blogs.

public function __construct() {
	$this->blogs = get_blog_list( 0, 'all' );

Lastly, we’ll call the parent constructor function and add some information about our widget. The function takes a Base ID(string), Name(string), Options(array) and Control Options(array). This information will will be displayed in the widget panel.

	parent::__construct(
		'mynetwork_widget', // Base ID
		'MyNetwork_Widget', // Name
		array(
			'description' => __( 'Display List of Blogs in Site Network', 'text_domain' )
		)
	);
}

Step 3 Writing the Form Function

In this step we will create the widget form found in the administrator. Our form will have an Image Url field for each blog on the site. The URL field will hold a thumbnail of the site being referenced.

Looping Through Blogs

The first thing we do is create a foreach loop that will loop through each site’s blogs created on your site. The loop does not include the blog name, so for this purpose we use the get_blog_details function. The function takes the blog id and can return Blog Name, ID, Post Count, Path and more. We will add the blog name above each URL field. If you you look closely, you will see that our get_field_id function uses the blog_id, this will make our name tag look like this image-1 which will be important for us in our other functions.

	public function form( $instance ) {
		// outputs the options form on admin
		foreach ($this->blogs AS $blog) {
			$image =  $instance['image-'.$blog['blog_id']];
			?>
			
				blogname; ?>

				
				
			
			


Step 4 Writing the Update Function
The Update Function will save the values entered in our widget form. First we make the variable $instance an array, then we make another loop of each blog. During the loop we will update the old $instance with $new_instance then we return the variable.
	public function update( $new_instance, $old_instance ) {
		// processes widget options to be saved
		$instance = array();
		foreach ($this->blogs AS $blog) {
			$instance['image-'.$blog['blog_id']] = strip_tags( $new_instance['image-'.$blog['blog_id']]);
		}
		return $instance;
	}


Step 5 Writing the Widget Function
Finally, we have our widget function which will render HTML in our widget position. Within this function we add a foreach loop of our registered blogs and during each loop, we will define the image, link and name of the blog. We add an if statement to check to see if an Image Url was added in the widget panel, if no images were selected then the respectful blog will not be shown. This is one way that admin can choose to hide a blog from their widget list. Next we add some HTML, with an image of each blog wrapped in its blog path and at the bottom we call the blog’s name. We finish the function by closing all open tags.
	public function widget( $args, $instance ) {
		// outputs the content of the widget
		foreach ($this->blogs AS $blog) {
			$image = $instance['image-'.$blog['blog_id']];
			$link = $blog['path'];
			$name = get_blog_details($blog['blog_id'])->blogname;
			if ($image) {
			?>
				
					
						" width="125" border="0" alt="" />
					
					
				
			

Finished Code

blogs = get_blog_list( 0, 'all' );
		parent::__construct(
			'mynetwork_widget', // Base ID
			'MyNetwork_Widget', // Name
			array(
				'description' => __( 'Display List of Blogs in Site Network', 'text_domain' )
			) // Args
		);
	}

	public function form( $instance ) {
		// outputs the options form on admin
		foreach ($this->blogs AS $blog) {
			$image =  $instance['image-'.$blog['blog_id']];
			?>
			
				blogname; ?>

				
				
			
			blogs AS $blog) {
			$instance['image-'.$blog['blog_id']] = strip_tags( $new_instance['image-'.$blog['blog_id']]);
		}
		return $instance;
	}

	public function widget( $args, $instance ) {
		// outputs the content of the widget
		foreach ($this->blogs AS $blog) {
			$image = $instance['image-'.$blog['blog_id']];
			$link = $blog['path'];
			$name = get_blog_details($blog['blog_id'])->blogname;
			if ($image) {
				?>
				
					
						" width="125" border="0" alt="" />
					
					
				
				


Conclusion
The styling of the blog was not covered in this tutorial but one can style the divs into a horizontal display or add some jQuery effects to make them scroll, fade or jump. I hope you find this tutorial useful and you adapt some of the snippets into your own widget. A great idea would be a carousel of registered site blogs. Please leave your feedback below. Happy coding!

Understanding the Walker Class

Stephen Harris — Mon, 14 May 2012 07:52:14 +0000

Menu items, pages and (hierarchical) taxonomies are all examples of data with a tree like structure: terms can have parents, children and siblings. Usually we would like to reflect this structure in the HTML markup. For displaying a menu, for instance, we want the HTML to be of a list of ‘top level’ links, with nested lists of their children, which themselves contain nested lists of their children, and so on. This tutorial will guide you through a class WordPress provides which makes producing this mark-up extremely simple.

What Is the Walker Class?

The walker class is an abstract class designed to help traverse and display elements which have a hierarchical (or tree like) structure. It doesn’t actually ‘do’ (in the sense of generating HTML) anything. It simply traces each branch of your tree: it has to be extended by other classes which tell it what to do for each element it comes across. WordPress provides its own extending classes, such as:

Walker_Nav_Menu – for displaying the HTML for navigation menus
Walker_Page – for displaying a list of pages
Walker_Category – for displaying a list of taxonomy terms.

Each of these classes extend the Walker class by simply dictating what the class outputs at each element and level of the tree. In order to de-mystify this class we shall look at its main methods and a couple of examples of how to use it. The class itself can be found here.

Walking the Tree

`Walk`

walk( $elements, $max_depth)

The walker class gets kicked off with the walk method and it’s this method which returns the HTML once it’s been generated. It accepts two arguments:

An array of elements that we wish to display, which will have some sort of parent-child relationship
$max_depth – sets how many generations we explore
Ok 3… If you scratch the surface of this method you’ll find you can actually pass extra arguments which get gathered into an array: $args. This is then passed to other methods in the class

The walk method singles out the ‘top level’ elements – those without parents – and places them in one array. The rest, the children, are placed in a second array where the key is the ID of its parent (it’s a two dimensional array as one parent can have multiple children):

$children_elements = array(
	'1' => array() //Array of elements corresponding to children of 1,
	'4' => array() //Array of elements corresponding to children of 4
);

It then loops through each of the parent elements in turn and applies the method display_element.

`Display_Element`

display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output )

As the name suggests display_element is responsible for displaying an element in our tree. In fact, it calls several functions to do this. These functions are deliberately left blank in the Walker class – and it’s these which are altered in the extending classes, as they determine the actual HTML returned. These include:

start_lvl – a function to return the HTML for the start of a new level. In the case of lists, this would be the start of a new ‘sub-list’, and so would be responsible for returning the
- end_lvl – called when we have finished a level. In the navigation menu example, this function is responsible for ending the sub-list with a closing list tag
start_el – the function responsible for displaying the current element we are on. In the case of menus, this means the
tag and the item’s link.
end_el – the function called after an element and all it’s children have been displayed. For our menu example this means returning a closing

So what does display_element actually do? It’s actually where all the magic of the Walker class takes place. First lets take a look at what arguments it’s given:

$element – this is the element we are currently at on our tree
$children_elements – an array of all child elements (not just children of the element referred to above). This is the second array formed in the walk method and the keys are the IDs of the parent.
$max_depth – how far down we are allowed to explore
$depth – how far down we currently are
$args – optional arguments (mentioned earlier)
$output – The HTML thus far. This is added to as we explore more of the tree.

The display_element method first calls start_el which is responsible for displaying the element. Exactly how it does that depends on the context. For a drop-down menu it may be '; $html .= 'This is an example of a checkbox'; echo $html; } // end sandbox_checkbox_element_callback

We’ll be revisiting this function momentarily, but first notice that I’ve added a label element next to the checkbox. Checkboxes often have an element associated with them that also afford the ability to be clicked to trigger the checkbox. This makes it easier for users to toggle an option without having to click precisely in the checkbox.


To associate a label with a checkbox, you need to give the label’s for attribute the value of the ID attribute of the checkbox to which it is bound. Easy enough, right?
Now, refresh your options page and you should see the new element visible on your options page. But, for now, it doesn’t actually save or retrieve a value. First, let’s introduce a value attribute on the checkbox. This is somewhat arbitrary but it’s a common practice to give a checked element a value of ’1.’ Let’s do that now:
$html = '';

Next, let’s think through exactly what needs to happen when we save a value. Ideally:

The user checks the element and saves the value
The page refreshes and the checkbox is checked
The user checks the element to disable it and saves the value
The page refreshes and the checkbox is not checked

Relatively clear, right? Rather than reading the option, setting up a conditional, and checking for the presence or absence of a value, we can take advantage of WordPress’ checked function.
The function accepts three arguments, only the first of which is required:

The first value is one of the values to compare
The second value to compare if the first value is not true
Whether or not to echo check="checked" to the browser

So let’s update our code to use this function:
$html = '';

Refresh the page and check the option, save, and repeat.
If any of this looks a bit confusing, review the previous article where we cover the significances of each attribute on an option element.
Finally, let’s update the front end of the theme to check this option and render a string of text based on if the option has been checked. Recall that when we created the element, we gave it the value of ‘1‘. This means that when the checkbox is checked and serialized, it will maintain a value of one. Simply put, we need to write a conditional that checks the value of the option and then renders text appropriately. In index.php, add this block of code:

	The checkbox has been checked.

	The checkbox has not been checked.


Now, go back to your settings page, toggle the checkbox, and refresh your page.
As mentioned at the beginning of this section, look back at the ‘Display Options’ that we introduced earlier in this series and see if it’s much clearer now that we’ve examined how to introduce and manage checkbox elements.
Radio Buttons
Radio Buttons are elements that are useful in groups – after all, you’re never going to use a single radio button. The thing about radio elements is that they provide a way to allow users to choose one out of a mutually exclusive set of options.
For one reason or another, radio buttons are often a challenge for WordPress developers. Hopefully, we’ll make it as easy as possible to bring into our projects. As with the rest of the examples in this series, detail what we’re going to do:

We want to introduce two options from which the user must select. We’ll be giving them very general labels.
The first option will be a radio element with the label ‘Option One’ and will have the value of ’1′.
The second option will be a radio element with the label ‘Option Two’ and will have the value of ’2′.

Seems clear enough – let’s go ahead and add the field element to our options page:
add_settings_field(
	'Radio Button Elements',
	'Radio Button Elements',
	'sandbox_radio_element_callback',
	'sandbox_theme_input_examples',
	'input_examples_section'
);

And let’s implement the radio element’s callback. First, we’ll specify the code, then we’ll review it:
function sandbox_radio_element_callback() {

	$options = get_option( 'sandbox_theme_input_examples' );

	$html = '';
	$html .= 'Option One';

	$html .= '';
	$html .= 'Option Two';

	echo $html;

} // end sandbox_radio_element_callback

The first thing to notice when working with radio buttons is that they do not follow the typical examples of how to set the ID and name attributes. Notice that the ID attribute is unique and has no relationship to the rest of the attributes on the element. Also notice that each element’s associated label uses the ID for it’s for attribute. This binds the label to the radio button so that users can click on the label to select the radio element.
Next, notice that the name attributes are the same for each radio element but the values are different. This is what makes radio buttons mutually exclusive – each radio element needs to have the same name but the values must be unique.
Finally, we can set up a conditional on the homepage by checking the element’s value. In your theme’s functions.php, add the following block of code:

	The first option was selected.

	The second option was selected.


Load your theme’s homepage, toggle the options, and refresh. You should see the two sentences changing based on the value of the option elements.
Select Box
The last element that we’re going to review is the select element. This element gives users a drop-down menu of options from which to choose. Let’s plan out exactly what we need to introduce for this element:

Define a select element. In our example, we’ll be treating it as three options for time.
We’ll give the options for ‘Never’, ‘Sometimes’, and ‘Always’.
We’ll populate a default option that will be set when the page loads.

At this point in the series, this should be quite routine. Let’s get started – first, we’ll introduce the settings field:
add_settings_field(
	'Select Element',
	'Select Element',
	'sandbox_select_element_callback',
	'sandbox_theme_input_examples',
	'input_examples_section'
);

Next, we’ll define the callback function. Review the code and then we’ll discuss it after the example:
function sandbox_select_element_callback() {

	$options = get_option( 'sandbox_theme_input_examples' );

	$html = '';

	echo $html;

} // end sandbox_radio_element_callback

First, refresh your options page to make sure the select element appears. Assuming that it does, let’s review the code above.
When defining the select element, we’ve given it an ID attribute and a name attribute much as we do with the rest of the elements that we’ve demonstrated. Next, each option has a unique value and text that corresponds to the value. Though you don’t have to do this, I’ve typically found it helpful when working in my projects. Finally, we’ve taken advantage of the selected helper that WordPress offers. This is much like the checked function that we’ve used in previous example except that it’s geared towards select options.
The last step will be to update the front end of the theme so that it checks the value of the select element after it has been saved. Add the following block of code to your index.php:

	Never display this. Somewhat ironic to even show this.

	Sometimes display this.

	Always display this.


Revisit the homepage of your theme, change up the options, and then refresh the page – you should notice the text update based on the option that you’ve selected.

Conclusion
With that, we finally reach the end of this series. The Settings API is a powerful feature of WordPress and provides us with the ability to implement well-designed, secure option pages, but it requires that we use it properly. Unfortunately, this is probably one of the most ignored features of the platform by many developers.
Ultimately, my goal was to walk developers through the API from the very beginning of understanding why it’s important, to settings, from menu pages, to tabbed navigation, and how to work with each of the element types.
Finally, remember that you can find the example code on GitHub. As you continue to work with the Settings API or find a feature that’s unclear, please contribute. I’d love for this series and the example code to continue to provide a source of education for the WordPress community.

Related Sources

checked
selected
WordPress Settings Sandbox



WordPress as a Knowledge Base
Robert Călin — Wed, 09 May 2012 10:22:46 +0000
At work we previously used KBPublisher to manage our knowledge base. It costed money, it was hard to style, code is encrypted with ion cube and so on, basically very hard to maintain. WordPress can do the same things and even better.
This tutorial will show you how to use custom taxonomies for knowledge base sections and custom posts for knowledge base articles.

Step 1 Administration
Knowledge base sections and articles need to be managed. WordPress makes this easy to do with custom taxonomies and custom post types.
Just register the new taxonomy and post type. Add the following into functions.php from your theme.
For more information on the ins and outs of this functionality, read our other custom post type and custom taxonomy articles.

function register_kb() {
	register_post_type( 'knowledgebase',
		array(
			'labels' => array(
				'name' => 'Knowledge Base',
				'menu_name' => 'Knowledge Base',
				'singular_name' => 'Article',
				'all_items' => 'All Articles'
			),
			'public' => true,
			'publicly_queryable' => true,
			'show_ui' => true,
			'show_in_menu' => true,
			'show_in_nav_menus' => true,
			'menu_position ' => 20,
			'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'comments', 'post-formats', 'revisions' ),
			'hierarchical' => false,
			'taxonomies' => array( 'section' ),
			'has_archive' => true,
			'rewrite' => array( 'slug' => 'knowledgebase', 'hierarchical' => true, 'with_front' => false )
		)
	);

	register_taxonomy( 'section', array( 'knowledgebase' ),
		array(
			'labels' => array(
				'name' => 'Sections',
				'menu_name' => 'Sections',
				'singular_name' => 'Section',
				'all_items' => 'All Sections'
			),
			'public' => true,
			'hierarchical' => true,
			'show_ui' => true,
			'rewrite' => array( 'slug' => 'knowledgebase-section', 'hierarchical' => true, 'with_front' => false ),
		)
	);
}
add_action( 'init', 'register_kb' );

function kb_rewrite_rules( $wp_rewrite ) {
	$new_rules = array( 'knowledgebase/(.*)/(.*)' => 'index.php?post_type=knowledgebase&section=' . $wp_rewrite->preg_index( 1 ) . '&knowledgebase=' . $wp_rewrite->preg_index( 2 ) );
	$wp_rewrite->rules = $new_rules + $wp_rewrite->rules;
}
add_action( 'generate_rewrite_rules', 'kb_rewrite_rules' );

This will run after WordPress has finished loading but before any headers are sent, registering the post type and taxonomy. Also, it will add the rewrite rules for the permalinks of the taxonomy and post type.
The register_post_type registers the custom post type, this is used for the KB articles. The register_taxonomy registers the custom taxonomy, this is used for the KB sections. The articles won’t be hierarchical but the sections will be, so it gives the possibility to create a tree structure.
Also it would be nice to show the sections that an article is assigned to.
function kb_columns( $defaults ) {
	$defaults['section'] = 'Sections';
	return $defaults;
}
add_filter( 'manage_knowledgebase_posts_columns', 'kb_columns' );

function kb_custom_column( $column_name, $post_id ) {
	$taxonomy = $column_name;
	$post_type = get_post_type( $post_id );
	$terms = get_the_terms( $post_id, $taxonomy );
	if ( !empty( $terms ) ) {
		foreach ( $terms as $term ) {
			$post_terms[] = " " . esc_html(sanitize_term_field('name', $term->name, $term->term_id, $taxonomy, 'edit')) . '';
		}
		echo join( ', ', $post_terms );
	}
	else echo 'No terms.';
}
add_action( 'manage_knowledgebase_posts_custom_column', 'kb_custom_column', 10, 2 );


Now add some sections and some articles so there is something to show.

Step 2 Showing the Sections
Add the following into functions.php from your theme.
function kb_sections( $sections = array(), $active_section = null ) {
	$taxonomy = 'section';
	$link_class = '';
	if ( empty( $sections ) ) {
		$link_class = 'root';
		$sections = get_terms( $taxonomy, array( 'parent' => 0, 'hide_empty' => 0 ) );
		$active_section = kb_active_section();
		echo '';
	}
	if ( empty( $active_section ) ) {
		$active_section = '';
	}
	foreach ( $sections as $section ) {
		$toggle = '';
		$section_children = get_terms( $taxonomy, array( 'parent' => $section->term_id, 'hide_empty' => 0 ) );
		if ( !empty( $section_children ) && $link_class != 'root' ) {
			$toggle = '';
		}
		echo '';
		echo '' . $toggle . $section->name . '';

		if ( !empty( $section_children ) ) {
			echo '';
			kb_sections( $section_children, $active_section );
		}
		echo "";
	}
	echo "";
}

function kb_active_section() {
	$taxonomy = 'section';
	$current_section = '';
	if ( is_single() ) {
		$sections = explode( '/', get_query_var( $taxonomy ) );
		$section_slug = end( $sections );
		if ( $section_slug != '' ) {
			$term = get_term_by( 'slug', $section_slug, $taxonomy );
		} else {
			$terms = wp_get_post_terms( get_the_ID(), $taxonomy );
			$term = $terms[0];
		}
		$current_section = $term->term_id;
	} else {
		$term = get_term_by( 'slug', get_query_var( $taxonomy ), get_query_var( 'taxonomy' ) );
		$current_section = $term->term_id;
	}
	return $current_section;
}

In the theme folder create a file called sidebar-sections.php where your kb_sections function will be called outputting an unordered and nested list of sections.


Like this, the KB sections can be shown everywhere as desired by including the sidebar.



Step 3 Showing the Articles
Add the following into functions.php from your theme.
function kb_article_permalink( $article_id, $section_id ) {
	$taxonomy = 'section';
	$article = get_post( $article_id );
	$section = get_term( $section_id, $taxonomy );
	$section_ancestors = get_ancestors( $section->term_id, $taxonomy );
	krsort( $section_ancestors );
	$permalink = '' . $article->post_title . '';
	return $permalink;
}

Note: this method is necessary because an article can be linked to multiple sections.
This will generate a hierarchical permalink structure.
Like: /knowledgebase/section-slug/sub-section-slug/another-sub-section-slug/article-slug
In the theme folder then create these files: archive-knowledgebase.php, single-knowledgebase.php, content-knowledgebase.php, taxonomy-section.php.
In archive-knowledgebase.php add the following to show the sections and recent articles.
ID, 'section' );
	$term = $terms[0];
	echo kb_article_permalink( $post->ID, $term->term_id );
endwhile;
get_footer();
?>

In single-knowledgebase.php add the following.


In content-knowledgebase.php add the following.


In taxonomy-section.php add the following to show a list of articles from a section.
query, array( 'posts_per_page' => 100 ) );
query_posts( $args );
$term = get_term_by( 'slug', get_query_var( 'term' ), 'section' );

get_header();
get_sidebar( 'sections' );
while ( have_posts() ) : the_post();
	echo kb_article_permalink( $post->ID, $term->term_id );
endwhile;
get_footer();
?>

This can be structured and styled as desired.

Example
A real life example of how this works and how it can be used: syneto.net

References

add_action
register_post_type
register_taxonomy
add_filter




How to Create an Instant Image Gallery Plugin for WordPress
John Sexton — Tue, 08 May 2012 09:51:34 +0000
Learn how to create a simple, automatically generated image gallery plugin with thumbnail navigation for WordPress. The end result is a simple, attractive gallery with thumbnail navigation that is created automatically whenever you upload images to a post or page. No special settings, no options to configure, no hoops to jump through – it just works!

Introduction
Here is a preview of what we will be creating:


Using Instant Gallery for WordPress
Before we get into the code, let’s take a quick look at how easy this gallery is to use. For those of you who just want to grab the code and use it, this section will show you how to do that.
For those that want to learn how to create this gallery, it is still good to get a sense of how it works before we start coding. So, let’s check it out!
Instant Gallery: The 2-Minute Quick-Start Guide
1. Start with a simple, blank Post or Page in WordPress. Hit the “Upload/Insert Media” button.

2. Next, upload some images to the Post or Page. Just drag and drop your images into the box.

3. When your images finish uploading, you’ll get a list of the images and their properties. You can drag and drop the images to re-order them on this screen. Instant Gallery respects the menu order that you set up in the WordPress media browser, so re-ordering the images here will re-order them on the gallery.

4. If you want to change any properties of the image, such as the Title, Caption or Description, then you can do that just like you normally would. In its current incarnation, Instant Gallery displays the image Title in the Gallery in between the main image and the thumbnails.
Why display the Title and not the other information? As you can see from the image, WordPress automatically fills out the Title of the image (using the image’s filename) as soon as you upload it. In keeping with the theme of making Instant Gallery as fast and easy to use as possible, I wanted to use the field that WordPress fills out automatically.

5. Finally, go back to your Post or Page and enter the [instant_gallery] shortcode in the content area. Hit save, and then go view your page. That’s it!

So, that’s all there is to it. The purpose of Instant Gallery is to be the fastest, easiest way to create an image gallery by uploading images to a Post or Page in WordPress. If you think that will be useful to you, then go ahead and grab the files and have fun!
You’ll be creating beautifully simple WordPress image galleries in an instant!
Let’s take one more look at the finished product:

Now, if you are interested in learning how Instant Gallery was created, either to improve your skills as a coder, or to build upon Instant Gallery and make it better, then please keep reading!

Creating Instant Gallery
As with most WordPress projects, we’ll be using HTML, CSS, PHP, and a little bit of JavaScript to accomplish our goal.
We will proceed in the following way:

HTML – Start with markup and fill it with static content
WordPress / PHP – Dynamically populate our markup with content
JavaScript – Apply the behavior to swap the images
CSS – Complete the look and feel with CSS


Step 1 The Markup
The markup for our gallery is very simple. We just have a main containing element that encompasses the entire gallery (#instant-gallery), the primary content panel that contains our main image and its title (#ig-main), and then the thumbnail navigation area (#ig-thumbs).
	

		
		

				
				

				
				Title Goes Here

		
		

		
		

			
			

				
				

			

			

				

				

			

				

			

		
		

	
	

Our navigation is an unordered list and each list item contains a thumbnail image.
For simplicity, we will just use three placeholder thumbnails in the static HTML version. In the next section we will use PHP to dynamically generate as many thumbnails as we need.
If we check out our markup now, we’ll get something that looks like this (just showing two thumbnails to keep the image size down):

So, that’s the basic markup. Not too exciting, but simple, clean HTML is the foundation of just about everything we do on the web so it’s worth taking the time to get it right.

Step 2 The WordPress and PHP
Now let’s get into the WordPress part of the tutorial. This may be the most exciting part for you Wptuts+ readers.
Let’s start by thinking conceptually about what we want to accomplish. The goal here is to have an image gallery automatically generated from any images that are uploaded to a given post or page.
In order to accomplish this, we need to know the following:

What post or page are we on?
Are there any images attached to this page? If so, let’s get them and some information about them.
Then, for the first image, we want to display it in the gallery, along with a caption or descriptive text.
Then, for all of the images (including the first) images, we want to display them as thumbnails below the gallery.
The first image should also be highlighted to show that it is currently selected.

With that general concept in mind, let’s take a look at the markup code from Step 1, now infused with the WordPress and PHP code we need to get the information we want. There is a fair amount going on here, so let’s break it down into smaller sections that correspond with the list above.

Step 2.1: Prepare the Query
//-------------------------------------------------
// Prepare the query
//-------------------------------------------------

	global $post;

	$args = array(
		'post_parent'    => $post->ID,			// For the current post
		'post_type'      => 'attachment',		// Get all post attachments
		'post_mime_type' => 'image',			// Only grab images
		'order'			 => 'ASC',				// List in ascending order
		'orderby'        => 'menu_order',		// List them in their menu order
		'numberposts'    => -1,					// Show all attachments
		'post_status'    => null,				// For any post status
	);

Here we are doing two main things:
First, we set up the global Post variable ($post) so we can have access to the relevant data about our post.
Second, we set up an array of arguments ($args) that define the kind of information we want to retrieve. Specifically, we need to get images that are attached to the current post. We’re also going to get all of them, and return them in the same order they appear in the WordPress gallery.
See the comments in the code snippet above to see which lines correspond to which parameters.

Step 2.2: Retrieve the Images
	// Retrieve the items that match our query; in this case, images attached to the current post.
	$attachments = get_posts($args);

		// If any images are attached to the current post, do the following:
		if ($attachments) {	

			// Initialize a counter so we can keep track of which image we are on.
			$count = 0;

			// Now we loop through all of the images that we found
			foreach ($attachments as $attachment) {

Here we are using the WordPress get_posts function to retrieve the images that match our criteria as defined in $args. We are then storing the results in a variable called $attachments.
Next, we check to see if $attachments exists. If this variable is empty (as will be the case when your post or page has no images attached to it), then no further code will execute. If $attachments does have content, then we move on to the next step.
Next, we initialize a simple counter variable so we can keep track of which image we are on. We do this because there are certain things we’ll want to output only the first time through our loop (such as the main gallery markup). It also gives us a means to assign unique IDs to each thumbnail in the navigation if we would like.
Then we open the loop that will step through each of our images.

Step 2.3: Main Galley Area
//---------------------------------------------------------
// Output the main containers and first large image;
// This is stuff we will only want to output one time.
//---------------------------------------------------------
	if($count == 0) { ?>

		
		

			
			

					
					 "ig-hero",
							'alt'   => trim(strip_tags( get_post_meta($attachment_id, '_wp_attachment_image_alt', true) )),
							'title' => trim(strip_tags( $attachment->post_title )),
						);
					?>

					
					ID, 'full', false, $default_attr); ?>

					
					

					
					post_title; ?>

					

			
			

			
			

	
	

Here we use our counter variable to determine how many times we have been through our loop. If this is the first time, $counter will be equal to zero, and the block of code above will be executed. This code sets up the main structural elements of the gallery and populates the main image section with the first large image. This stuff only needs to happen once. For subsequent trips through the loop, $counter will be greater than zero and this block of code will be skipped.
Ok, so what’s actually going on in there? We’ve already looked at the HTML part in Step 1, so let’s focus on the PHP code that inhabits the main gallery area.
	
	 "ig-hero",
			'alt'   => trim(strip_tags( get_post_meta($attachment_id, '_wp_attachment_image_alt', true) )),
			'title' => trim(strip_tags( $attachment->post_title )),
		);
	?>

	
	ID, 'full', false, $default_attr); ?>

	
	

	
	post_title; ?>

	

In the first section here, we define an array of parameters just like we did in Step 2.1. This time, however, instead of parameters for a query, we are setting parameters for a WordPress function called wp_get_attachment_image.
This function grabs the current attachment (our current image), returns the full size of the image (as opposed to a smaller size such as the Thumbnail; we’ll get into that later), and applies attributes to the image HTML tag that correspond to the arguments defined in the $default_attr array. The “alt” and “title” tags of the image are defined as you would expect, and the image is given an ID of #ig-hero so that we can easily target it with CSS.
Finally, we output image title again, this time as the Title which appears below the image. By default, WordPress sets the image Title to be equal to the filename of the uploaded image. So, when you use this technique, either (1) make sure the filenames of the images you upload are something you would like to have displayed on your slideshow, (2) edit the Title field of the images when you upload them, or (3) comment this part of the code out so that the title does not display in the slideshow at all.

Step 2.4: Thumbnail Navigation
	
	

		
		 

			
			

				 "thumb selected",
						);

				} else {

					// For all other thumbnails, just add the basic class of 'thumb'
					$thumb_attr = array(
						'class' => "thumb",
						);

				} ?>

				
				ID, 'thumbnail', false, $thumb_attr); ?>

			

				
				

		
		

	
	

	

Now let’s take a closer look at the thumbnail navigation. At the top of this block of code we’ve repeated the opening of the #ig-thumbs list to help you orient yourself in the code. With that reference point in mind, let’s look at the actual list items themselves.
You’ll notice that we are using a little snippet of PHP to output the $count variable, plus one, to give each list item its own unique ID. This will give us just one more degree of control over the list items with CSS, should we want it. We use $count+1 so that we don’t have to start at zero.
Inside the list item, there is a conditional statement that checks one more time which iteration of the loop we are on. As we have done a few times before, we are setting an array; however, this time it is an attribute for the thumbnail images. The difference here is that we are setting slightly different parameters for the array depending on if we are on the first trip through the loop or not.
We always give the thumbnail a class of “thumb”, but on the first trip through the loop we also give the first thumbnail a class of “selected”. This is something we will target with CSS later on in order to provide a consistent user experience.
Once the $thumb_attr attributes are set, we use wp_get_attachment_image again to output the image. The main thing to note this time is that we are grabbing the thumbnail version of the image instead of the full size of the image that we grabbed above.
Then, since we are at the end of our loop, we increment our counter and begin the loop again. Once we’ve exhausted all of our image attachments, we’ll hit the end of the loop. When this happens, we close the unordered list, then the whole gallery container, and then our PHP conditional statements.

Step 2.5: Add the Shortcode
It’s great have coded up our image gallery, but it is even better if we can display our image gallery! At this point, we still don’t have any way to actually show the output on a WordPress Post or Page. We’re going to fix that right now, and fortunately this step is easy!
	//-------------------------------------------------
	// Create the Shortcode for Instant Gallery
	//-------------------------------------------------

	add_shortcode('instant_gallery', 'instant_gallery');

It feels good to have a nice quick win after the big block of code from Step 2.4. Here we’re just defining a very simple shortcode so that we will be able to add the gallery to our WordPress posts or pages.
This takes our function, called ‘instant_gallery‘ which is defined above, and creates a new shortcode with an identical name. We can then insert the gallery into our posts or pages using the shortcode [instant_gallery].
There are plenty of in-depth articles about shortcodes out there, including some good ones right here on Wptuts+. If you are new to shortcodes, here are some good starting points:

Getting Started with WordPress Shortcodes
WordPress Shortcodes: The Right Way
Quick Tip: Using Shortcodes in Theme Development
WordPress Shortcode API


Step 2.6: Gather Our Thoughts
Whew! Ok, so that’s all the code for the gallery itself. The code we’ve written so far will retrieve a list of image attachments from the current WordPress post or page and then automatically generate a gallery according to the markup we provided. The shortcode then gives us a convenient way to insert our galleries into our posts or pages.
If we upload some awesome images of seahorses and jellyfish and then check our results, here is what we will have at this point:

From a WordPress point of view, we have done what we need to do. Without JavaScript, however, the gallery won’t actually do anything. Without CSS, it won’t look very good, either. So, let’s take a minute to digest what we’ve done so far, and then we will move on to the next step where we make our gallery come alive!

Step 3 The JavaScript
As you might expect, Instant Gallery relies on the magic of jQuery to achieve the basic level of interactivity that it requires. There are actually two parts to this. The first is loading the jQuery library into our theme correctly, and the second is the actual jQuery code which will create the behavior we need (namely, swapping images and image titles when a thumbnail is clicked).
Both of these parts offer a good opportunity to employ some insights and WordPress best practices, so if you are new to working with jQuery in the context of WordPress, pay special attention!

Step 3.1: Using Enqueue Script to Load jQuery in WordPress
As you may know, jQuery (as well as many other JavaScript libraries) come pre-loaded with WordPress. For the sake of simplicity, we will use the version of jQuery included with WordPress for this example.
This is a good opportunity to use the WordPress wp_enqueue_script function. This is the “right” way to load scripts in WordPress. It ensures that the scripts are loaded at the proper place and time as WordPress executes, and that conflicts are avoided.
The wp_enqueue_script function can be confusing, but fortunately there are plenty of good articles about it out there. Here are some useful resources about wp_enqueue_script:

How to Include JavaScript and CSS in Your WordPress Themes and Plugins
Use Google-Hosted JavaScript Libraries (…still the Right Way) (Updated Dec. 2011)

	//-------------------------------------------------
	// Enqueue jQuery
	//-------------------------------------------------

	function wptuts_enqueue_jquery() {

		wp_enqueue_script('jquery');

	}

	// Only add the javascript if we are NOT on the admin screen
	add_action("wp_enqueue_scripts", "wptuts_enqueue_jquery", 11);

Notice that we attach this function to the WordPress hook “wp_enqueue_scripts” which loads all the scripts that have been enqueued by “wp_enqueue_script“.  Subtle difference there, but it is important!
Here is an important note about wp_enqueue_scripts from the WP Codex:
wp_enqueue_scripts hook (instead of the init hook which many articles reference), we avoid registering the alternate jQuery on admin pages, which will cause post editing (amongst other things) to break after upgrades often.

Step 3.2: Using jQuery to Bring Instant Gallery to Life
Now we can move on to the jQuery code that powers the swapping of images and titles. We only need a few lines of code to accomplish this. Some of you out there who are well versed in jQuery may even be able to suggest some more efficient ways to get the job done!
As we did with the WordPress code in Step 2, let’s walk through this conceptually before we get into the code itself. When we click on a thumbnail, we want a few things to happen:

First and most importantly, we want to swap out the existing image in the main hero position for another large image – the one that corresponds to the thumbnail we clicked on.
Second, we want to replace the title of the old image with the one that corresponds to the new image. We will do this by taking advantage of the WordPress file naming scheme. We will talk about how to do that in just a moment.
Third, we want to highlight the thumbnail corresponding to our large image at any given time. As we saw in Step 2.4 above, the way we designate this is with a class of ‘selected’ on the current thumbnail.
Finally, when a new image is chosen, we remove the class of ‘selected’ from all images, and then add it back again to the newly selected thumbnail.

So, with those key actions in mind, let’s see what this looks like in jQuery:
	//-------------------------------------------------
	// Activate Instant Gallery
	//-------------------------------------------------

	function activate_instant_gallery() {
	?>

		

	

Fortunately, the jQuery code is relatively simple, and corresponds nicely to our bullet list of required actions above.
The code is pretty well-documented, so if you don’t understand a line, the comments should help. Even so, let’s break down the jQuery, line by line (leaving aside the generic “wrapper function” of ( function ($) { } ) which we will discuss in a moment).
The line that begins $('#ig-thumbs').delegate is what defines the scope of our function. It is saying, whenever someone clicks on an image object (img) inside a container with an ID of #ig-thumbs, then execute the actions within the function.
The next line, which begins $('#ig-hero'), handles the actual swapping of our current image for the large image that corresponds to the thumbnail that was clicked. In this jQuery function, the thumbnail that was clicked is referred to as “this” because it was the subject of the action “click”; it is the thing that was clicked upon and triggered the function.
The method for accomplishing the image swap takes advantage of the WordPress file naming scheme. For example: When you upload an image called my-image.jpg, WordPress will create several different sizes of that image. One automatically created size will be a “Thumbnail” size which is, by default, a 150×150 square cropped out of your original image. WordPress will name this file my-image-150×150.jpg. It simply adds a “-150×150″ to the end of your filename, right before the file extension.
So, if we want to replace a thumbnail version of an image with the full-sized version of that image, then we just have to remove the “-150×150″ from the filename. This is what our jQuery is doing to swap the images.
If we wanted to replace the thumbnail with a different size of the image, but not the full sized image, we would need to know the dimensions of that other size, and then we could just switch the dimensions. For example, if we wanted to switch out my-image-150×150.jpg for a Medium sized image of 600×300, then we would just use the jQuery code to swap the “-150×150″ with a “-600×300″, and we would be left with my-image-600×300.jpg.
Next, with the line that begins $('#ig-thumbs li img'), we just remove the CSS class of “selected” from all of the thumbnails, and then the line below that adds the class of “selected” to “this”; that is, the image that was clicked.
Finally, with the line that begins $('#ig-title'), we switch the Title of the old image with that of the new image. This line takes the contents of a containing element with an ID of #ig-title
Step 3.3: Using jQuery in the Context of WordPress
Now, since we are performing all of these operations within the context of WordPress, we should be aware of an important detail about how WordPress loads jQuery.
WordPress runs jQuery in “no conflict mode” so as to avoid conflicts with other JavaScript libraries. In practical terms this means that the useful $ shortcut commonly used in jQuery won’t work in WordPress by default.
Fortunately, this topic has been discussed at length already. If you are interested in learning more about the reasons for this, Chris Coyier has a great article on Digging Into WordPress that addresses precisely this issue. For the purposes of this article, we just need to wrap our jQuery function in a generic function to re-enable use of the $ shortcut within our code snippet.
Finally we add this code using a built in WordPress hook – wp_footer – to load the script correctly and only after the rest of the page has loaded.
With the jQuery in place, let’s take a look at what we have so far. Now our gallery is interactive, and clicking on one of the thumbnails correctly replaces the main image and corresponding title. In the example image below, you can see that we’ve clicked on the second thumbnail and both the main image and its title have been replaced as we would expect.

So, it works, but it still doesn’t look very good. Fortunately, we can tidy things up with some basic CSS. And that’s just what we’ll do in the next step.

Step 4 The CSS
Step 4.1: CSS for Instant Gallery
Now it is finally time to style our creation and make it look more like an actual image gallery. Since the major focus of this tutorial was on the WordPress and jQuery functionality, I’ve kept the CSS for this gallery extremely simple. Here is the CSS code for the gallery:
	/* Instant Gallery */

	#instant-gallery {
		overflow: hidden;
		display: block;
		width: 100%;
		margin-bottom: 1.5em;
	}

	/* Main Display Area */

	#ig-main {
		width: 100%;
	}

	#ig-hero {
	}

	#ig-title {
		margin-top: 1.5em;
		margin-bottom: 1.5em;
		line-height: 1.5em;
	}

	/* Thumbnails */

	#ig-thumbs {
		overflow: hidden;
		margin: 0;
	}

	#ig-thumbs li {
		margin-right: 1.5em;
		margin-bottom: 1.5em;
		float: left;
		display: block;
		cursor: pointer;
	}

	#ig-thumbs img {
		width: 75px;				/* Customize to change Thumbnail Width */
		height: 75px;				/* Customize to change Thumbnail Height */
		padding: 1px;
		border: 1px solid #ddd;
	}

	#ig-thumbs li img:hover,
	#ig-thumbs li img.selected {
		border: 1px solid #aaa !important;
	}

There is nothing too complicated about our CSS. Just the basic selectors and styles necessary to create the gallery. If you want to modify the CSS to make your gallery a bit more fancy, I have provided all of the selectors you would need to do so.
One thing to notice here is that I’ve constrained the size of the thumbnails to 75×75 instead of the 150×150 size at which we retrieved them from WordPress. The 150×150 size is a little too large for my tastes; I like the smaller thumbnails so you can fit more under the gallery. If you want to use a different size, all you have to do is change the width and height of the thumbnail images on the two lines marked on the CSS.

Step 4.2: Using Enqueue Style to Load CSS in WordPress
Perhaps more interesting than the CSS itself is the manner that we use to load it. We could just do a simple link tag and hook it into our header using the wp_head hook, but there is a better way.
Taking a hint from the enqueue_script function that we used to load jQuery, we can use a similar function, wp_enqueue_style, to load our style sheet. As with enqueue_script, this is the preferred way to load stylesheets within WordPress. It is good to practice these techniques even with simple projects such as this because it allows you to focus on understanding the technique and why it works without worrying about debugging massive amounts of code. There is a certain satisfaction in doing something simple very well!
	//----------------------------------------------------------------------
	// Import Stylesheet
	//----------------------------------------------------------------------

	function add_stylesheets() {

		// change this path to load your own custom stylesheet
		$css_path = WP_PLUGIN_URL . '/instant-gallery/instant-gallery.css';

		// registers your stylesheet
		wp_register_style( 'instantGalleryStyles', $css_path );

		// loads your stylesheet
		wp_enqueue_style( 'instantGalleryStyles' );
	}

	// Only add the stylesheet if we are NOT on the admin screen
	if (!is_admin()) add_action( 'wp_enqueue_scripts', 'add_stylesheets' );

So that is how you use wp_enqueue_style. Very similar to enqueue_script. You’ll notice that there is another command in here as well: wp_register_style. This function simply registers a CSS file with WordPress for later use with wp_enqueue_style.
Now our image gallery finally looks as good as it functions!

All Together Now
Check out the finished product:

It looks very simple, and that’s exactly what we want. The point of this gallery is to be the simplest, fastest way to automatically generate an image gallery from images uploaded to a WordPress post of page, nothing more!
Please feel free to check out a live demo of Instant Gallery for WordPress on my personal website.
The completed code is too long to display here in full, so please feel free to download the source files (at the top of the article) and have a look at everything on your own.

Conclusion
We have just created an instant image gallery with thumbnail navigation for a WordPress!
Throughout this tutorial I’ve done my best to incorporate good practices on everything from clear markup, semantic CSS, and even the way stylesheets and javascript are loaded. If you played along and worked through the steps, then I hope you learned a new technique or two. If you are just here for the finished code, I hope you find it useful and that you can use it confidently and with the knowledge that you are using some simple code that was made with love.
As with all coding projects, there are always ways to make improvements. If you can think of any way to make this code better or more robust, I welcome any and all constructive feedback in the comments!
I also welcome any and all suggestions on how to improve the plugin and make it more powerful or elegant. I am not very interested, however, in making it more complicated or adding a bunch of features. There are lots of full featured image galleries out there already, and I would like this one to remain simple and fulfil one very specific purpose.
Finally, I would like to thank Japh Thomson for giving me the opportunity to write for Wptuts+, and thank Envato for building a great educational community on the web. Most importantly, thank you for reading!
I look forward to your feedback, please let me know in the comments if you use Instant Gallery on any of your websites!



Add Post Type Archive Links to Your Menu
Stephen Harris — Mon, 07 May 2012 09:24:28 +0000
A common request, particularly for those who have created custom post types like ‘News’ or ‘Events’, is to add a link to their post type’s archive page on their navigation menu. Currently, however, this can only be done by manually entering the post type archive URL. Apart from being fairly inelegant, this solution has a few drawbacks: it doesn’t always appear as ‘current’, if you change your permalink structure it could break the link, manually adding the URLs is tedious and the link does not appear as ‘current’ when on a post of that post type.
In this tutorial I will show you how to produce a plugin that creates a meta-box on your Appearance -> Menu page which allows you to add post type archive links. These links don’t suffer from the drawbacks mentioned above.

Step 1 Creating a Plugin
This plugin will be called ‘My Post Type Archive Links’, and to that end first create a folder called my-post-type-archive-links under your /wp-content/plugins/ folder, and inside that create a file my-post-type-archive-links.php. This file is the main plugin file. We’re going to wrap it in a class – this is simply so we don’t have to worry about our function names clashing with WordPress or other plugins: we simply need to make sure that our class name is unique. Add the following to my-post-type-archive-links.php
 Menu page to add post type archive links
Author: Stephen Harris
Author URI: http://profiles.wordpress.org/users/stephenh1988/
*/

class My_Post_Type_Archive_Link {
	//Everything will go here
}
My_Post_Type_Archive_Link::load();
?>

Everything in this tutorial will sit inside that class.

Step 2 Loading the Plugin
When the plugin file is loaded, it will fire the class method load(). This method will be responsible for adding actions and filters onto various WordPress hooks. We’ll go through each of them in the subsequent steps, but it also provides a useful summary. Add the following method to our class:
	public function load(){
		// Hook function to add the metabox to the Menu page
		add_action( 'admin_init', array(__CLASS__,'add_meta_box'));

		// Javascript for the meta box
		add_action( 'admin_enqueue_scripts', array(__CLASS__,'metabox_script') );

		// Ajax callback to create menu item and add it to menu
		add_action('wp_ajax_my-add-post-type-archive-links', array( __CLASS__, 'ajax_add_post_type'));

		// Assign menu item the appropriate url
		add_filter( 'wp_setup_nav_menu_item',  array(__CLASS__,'setup_archive_item') );

		// Make post type archive link 'current'
		add_filter( 'wp_nav_menu_objects', array(__CLASS__,'maybe_make_current'));
	}

Let’s summarise what each of these parts are doing:

Add a meta-box – Fairly self explanatory. The hooked function will be responsible for adding our meta box.
Enqueue JavaScript – We use the admin_enqueue_scripts hook to enqueue our JavaScript file. Our JavaScript, when ‘add to menu’ is clicked, will trigger an AJAX request.
AJAX callback – This function is responsible for handling the above AJAX request. It will create the menu items and add them onto the menu.
Menu item set up – This ensures that when the archive link appears on your menu it correctly points to the post type’s archive.
Maybe make current – Whenever a menu appears its items are passed through a filter, we will ensure that the class ‘current-menu-item‘ is added to the appropriate post type link.


Step 3 Adding the Metabox
First we define our add_meta_box method, which simply calls the WordPress function add_meta_box(). The details of this function have been covered many times before, but if you are unsure you can read up on it in the Codex pages.
	public function add_meta_box() {
		add_meta_box( 'post-type-archives', __('Post Types','my-post-type-archive-links'),array(__CLASS__,'metabox'),'nav-menus' ,'side','low');
	}

Next we define the meta-box callback function which is responsible for displaying the metabox’s insides:
	public function metabox( ) {
		global $nav_menu_selected_id;

		//Get post types
		$post_types = get_post_types(array('public'=>true,'_builtin'=>false), 'object');?>

		
		
		
			 labels->name); ?> 
		
		


		
		
			
				 value="" name="add-post-type-menu-item"  class="button-secondary submit-add-to-menu" />
			
		
	
This method simply gets all public custom post types with get_post_types() and then loops through them to create a list of checkboxes. Each checkbox has the name of the post type as its value. In the next step we add some javascript that will be triggered when a user clicks the ‘Add to Menu’ button.

Step 4 The JavaScript
We only want to enqueue our JavaScript on the Appearance -> Menu admin page. We’ve used the admin_enqueue_scripts hook which fires only on admin pages and passes the page’s hook as an argument. The hook for the Appearance -> Menu page is nav-menus.php. After enqueueing our script we use wp_localize_script to make the nonce available in our JavaScript. We include it in the AJAX request to help verify that the action was intended.
	public function metabox_script($hook) {
		if( 'nav-menus.php' != $hook )
			return;

		//On Appearance>Menu page, enqueue script:
		wp_enqueue_script( 'my-post-type-archive-links_metabox', plugins_url('/metabox.js', __FILE__), array('jquery'));

		//Add nonce variable
		wp_localize_script('my-post-type-archive-links_metabox','MyPostTypeArchiveLinks', array('nonce'=>wp_create_nonce('my-add-post-type-archive-links')));
	}

In the previous step the ‘Add to Menu’ button was given the ID submit-post-type-archives. We now use jQuery to target that button and, when clicked, send an AJAX request to create the menu item and append it to the menu. The following is the only part of this tutorial that lives outside our class. It should go in a file called metabox.js, inside our plug-in folder.
	jQuery(document).ready(function($) {
		$('#submit-post-type-archives').click(function(event) {
			event.preventDefault();

			/* Get checked boxes */
			var postTypes = [];
			$('#post-type-archive-checklist li :checked').each(function() {
				postTypes.push($(this).val());
			});

			/* Send checked post types with our action, and nonce */
			$.post( ajaxurl, {
					action: "my-add-post-type-archive-links",
					posttypearchive_nonce: MyPostTypeArchiveLinks.nonce,
					post_types: postTypes
				},

				/* AJAX returns html to add to the menu */
				function( response ) {
					$('#menu-to-edit').append(response);
				}
			);
		})
	});

Notice the URL we are sending the request to: ajaxurl. We haven’t defined it anywhere. It’s a global variable set by WordPress on the admin side only which points to the page that WordPress uses to handle AJAX requests. When the submit button is clicked, the names of the checked post types, a unique action and nonce are all sent to this URL. When WordPress receives the request it triggers the wp_ajax_my-add-post-type-archive-links hook. The nonce is a security precaution to help verify that the action was intended.

Step 5 The AJAX Callback
We now define the AJAX callback function ajax_add_post_type.
	public function ajax_add_post_type() {

		if ( ! current_user_can( 'edit_theme_options' ) )
			die('-1');

		check_ajax_referer('my-add-post-type-archive-links', 'posttypearchive_nonce');

		require_once ABSPATH . 'wp-admin/includes/nav-menu.php';

		if(empty($_POST['post_types']))
			exit;

		// Create menu items and store IDs in array
		$item_ids=array();
		foreach ( (array) $_POST['post_types'] as $post_type) {
			$post_type_obj = get_post_type_object($post_type);

			if(!$post_type_obj)
				continue;

			$menu_item_data= array(
				'menu-item-title' => esc_attr($post_type_obj->labels->name),
				'menu-item-type' => 'post_type_archive',
				'menu-item-object' => esc_attr($post_type),
				'menu-item-url' => get_post_type_archive_link($post_type)
			);

			//Collect the items' IDs.
			$item_ids[] = wp_update_nav_menu_item(0, 0, $menu_item_data );
		}

		// If there was an error die here
		if ( is_wp_error( $item_ids ) )
			die('-1');

		// Set up menu items
		foreach ( (array) $item_ids as $menu_item_id ) {
			$menu_obj = get_post( $menu_item_id );
			if ( ! empty( $menu_obj->ID ) ) {
				$menu_obj = wp_setup_nav_menu_item( $menu_obj );
				$menu_obj->label = $menu_obj->title; // don't show "(pending)" in ajax-added items
				$menu_items[] = $menu_obj;
			}
		}

		// This gets the HTML to returns it to the menu
		if ( ! empty( $menu_items ) ) {
			$args = array(
				'after' => '',
				'before' => '',
				'link_after' => '',
				'link_before' => '',
				'walker' => new Walker_Nav_Menu_Edit
			);
			echo walk_nav_menu_tree( $menu_items, 0, (object) $args );
		}

		// Finally don't forget to exit
		exit;
	}

Let’s go through this callback a bit at a time. First we check the user’s permissions, verify the nonce and load the nav-menu.php page (we need some of the functions).
		if ( ! current_user_can( 'edit_theme_options' ) )
			die('-1');

		check_ajax_referer('my-add-post-type-archive-links','posttypearchive_nonce');

		require_once ABSPATH . 'wp-admin/includes/nav-menu.php';

		if(empty($_POST['post_types']))
			exit;

We then create a menu item for each selected post type. We first check the post type we received exists by checking the value returned by get_post_type_object(). We can obtain the archive link with the function get_post_type_archive_link()
Menu items are in fact posts of post type ‘nav_menu_item‘ with built-in post meta, including fields relating to ‘url‘, ‘type‘ and ‘object‘. The item’s ‘type‘ is normally ‘custom‘, ‘post_type‘ or ‘taxonomy‘ – but we shall set its value to ‘post_type_archive‘. The item’s ‘object‘ meta value is normally only used for items of ‘post_type‘ or ‘taxonomy‘ type and refers to post type or taxonomy the link refers to. We’ll use this to store the post type of the archive link.
		// Create menu items and store IDs in array
		$item_ids=array();
		foreach ( (array) $_POST['post_types'] as $post_type) {
			$post_type_obj = get_post_type_object($post_type);

			if(!$post_type_obj)
				continue;

			$menu_item_data= array(
				'menu-item-title' => esc_attr($post_type_obj->labels->name),
				'menu-item-type' => 'post_type_archive',
				'menu-item-object' => esc_attr($post_type),
				'menu-item-url' => get_post_type_archive_link($post_type)
			);

			// Collect the items' IDs.
			$item_ids[] = wp_update_nav_menu_item(0, 0, $menu_item_data );
		}

		// If there was an error die here
		if ( is_wp_error( $item_ids ) )
			die('-1');

Next we simply generate the HTML which will be added to the menu. We use the $item_ids array to get an array of menu items and pass this to a WordPress walker class to do the hard work for us.
		//Set up menu items
		foreach ( (array) $item_ids as $menu_item_id ) {
			$menu_obj = get_post( $menu_item_id );
			if ( ! empty( $menu_obj->ID ) ) {
				$menu_obj = wp_setup_nav_menu_item( $menu_obj );
				$menu_obj->label = $menu_obj->title; // don't show "(pending)" in ajax-added items
				$menu_items[] = $menu_obj;
			}
		}

		//This gets the HTML to returns it to the menu
		if ( ! empty( $menu_items ) ) {
			$args = array(
				'after' => '',
				'before' => '',
				'link_after' => '',
				'link_before' => '',
				'walker' => new Walker_Nav_Menu_Edit
			);
			echo walk_nav_menu_tree( $menu_items, 0, (object) $args );
		}

		//Finally don't forget to exit
		exit;


Step 6 The Menu Item
Unfortunately, because of a bug with WordPress, if your item’s type is not ‘taxonomy‘, ‘custom‘ or ‘post_type‘ the URL gets removed. To counter this, when a ‘post_type_archive‘ link is used in a menu, we manually re-add the URL. This also ensures the archive link is ‘up to date’ (in case your permalink structure has been changed).
	public function setup_archive_item($menu_item){
		if($menu_item->type !='post_type_archive')
		 	return $menu_item;

		$post_type = $menu_item->object;
		$menu_item->url =get_post_type_archive_link($post_type);

		return $menu_item;
	}


Step 7 Making the Link Current
Finally we need to make the item ‘current’ when we are on the appropriate page. I want the post type archive link to be highlighted as current if we are on that archive page, or viewing a single post of that type. To do this I check:

is_post_type_archive()
is_singular()

To make the item current, we simply need to add current-menu-item to the item’s classes which are stored in $item->classes. We then have to loop through its parents in the menu and add the classes current_item_parent and current_item_ancestor. Let’s look at each bit individually:
We loop through each of the items in the menu:
	public function maybe_make_current($items) {
		foreach ($items as $item) {
			// This is where we check the item
		}
		return $items;
	}

If the item is not of ‘post_type_archive‘ or if it is, but we don’t want it to make it ‘current’, we simply skip on to the next item. Recall that for our archive links, the post type is stored as the item’s object. So inside the foreach loop:
			if('post_type_archive' != $item->type)
				continue;

			$post_type = $item->object;
			if(!is_post_type_archive($post_type)&& !is_singular($post_type))
				continue;

If we do want to make it current we give it the appropriate class and then grab its parents in the menu. A menu item’s parent are stored as post meta with meta key _menu_item_menu_item_parent.
		//Make item current
		$item->current = true;
		$item->classes[] = 'current-menu-item';

		//Get menu item's ancestors:
		$_anc_id = (int) $item->db_id;
		$active_ancestor_item_ids=array();

		while(( $_anc_id = get_post_meta( $_anc_id, '_menu_item_menu_item_parent', true ) ) && ! in_array( $_anc_id, $active_ancestor_item_ids )  ) {
			$active_ancestor_item_ids[] = $_anc_id;
		}

We then loop through the menu items and give the ‘current’ item’s parents and ancestors the appropriate classes.
		// Loop through the items and give ancestors and parents the appropriate class
		foreach ($items as $key=>$parent_item) {
			$classes = (array) $parent_item->classes;

			// If menu item is the parent
			if ($parent_item->db_id == $item->menu_item_parent ) {
				$classes[] = 'current-menu-parent';
				$items[$key]->current_item_parent = true;
			}

			// If menu item is an ancestor
			if ( in_array(  intval( $parent_item->db_id ), $active_ancestor_item_ids ) ) {
				$classes[] = 'current-menu-ancestor';
				$items[$key]->current_item_ancestor = true;
			}

			$items[$key]->classes = array_unique( $classes );
		}

Putting that function together:
	public function maybe_make_current($items) {
		foreach ($items as $item) {
			if('post_type_archive' != $item->type)
				continue;

			$post_type = $item->object;
			if(!is_post_type_archive($post_type)&& !is_singular($post_type))
				continue;

			// Make item current
			$item->current = true;
			$item->classes[] = 'current-menu-item';

			// Get menu item's ancestors:
			$_anc_id = (int) $item->db_id;
			$active_ancestor_item_ids=array();

			while(( $_anc_id = get_post_meta( $_anc_id, '_menu_item_menu_item_parent', true ) ) && ! in_array( $_anc_id, $active_ancestor_item_ids )  ) {
				$active_ancestor_item_ids[] = $_anc_id;
			}

			// Loop through ancestors and give them 'ancestor' or 'parent' class
			foreach ($items as $key=>$parent_item) {
				$classes = (array) $parent_item->classes;

				// If menu item is the parent
				if ($parent_item->db_id == $item->menu_item_parent ) {
					$classes[] = 'current-menu-parent';
					$items[$key]->current_item_parent = true;
				}

				// If menu item is an ancestor
				if ( in_array(  intval( $parent_item->db_id ), $active_ancestor_item_ids ) ) {
					$classes[] = 'current-menu-ancestor';
					$items[$key]->current_item_ancestor = true;
				}

				$items[$key]->classes = array_unique( $classes );
			}

		}
		return $items;
	}

All that remains is to go to your plugins admin page and activate the plugin.

Conclusion
There is always room for improvement. For instance, with a bit of jQuery you could add a ‘Select All’ link underneath the checkboxes or display a ‘loading’ symbol while the AJAX is processing. Now this plugin isn’t the simplest solution – but it does work well and avoids the pitfalls of simply adding a custom link. The above plugin in it’s entirety can be found on my GitHub. If you have any comments or suggestions, feel free to leave a comment or contact me via Twitter.

Wptuts+

Adding Post Series Functionality to WordPress With Taxonomies

Step 1 Creating the Plugin File

Step 2 Setting Up Our New Taxonomy: “Series”

Step 3 Creating the Shortcode: [series]

Conclusion: Usage Examples

Creating a WordPress Network Widget

Step 1 Adding the Base for the Widget

Step 2 Writing the Construct Function

Step 3 Writing the Form Function

Looping Through Blogs

Step 4 Writing the Update Function

Step 5 Writing the Widget Function

Finished Code

Conclusion

Understanding the Walker Class

What Is the Walker Class?

Walking the Tree

Walk

Display_Element

Radio Buttons

Select Box

Conclusion

Related Sources

WordPress as a Knowledge Base

Step 1 Administration

Step 2 Showing the Sections

Step 3 Showing the Articles

Example

References

How to Create an Instant Image Gallery Plugin for WordPress

Introduction

Using Instant Gallery for WordPress

Instant Gallery: The 2-Minute Quick-Start Guide

Creating Instant Gallery

Step 1 The Markup

Step 2 The WordPress and PHP

Step 2.1: Prepare the Query

Step 2.2: Retrieve the Images

Step 2.3: Main Galley Area

Step 2.4: Thumbnail Navigation

Step 2.5: Add the Shortcode

Step 2.6: Gather Our Thoughts

Step 3 The JavaScript

Step 3.1: Using Enqueue Script to Load jQuery in WordPress

Step 3.2: Using jQuery to Bring Instant Gallery to Life

Step 3.3: Using jQuery in the Context of WordPress

Step 4 The CSS

Step 4.1: CSS for Instant Gallery

Step 4.2: Using Enqueue Style to Load CSS in WordPress

All Together Now

Conclusion

Add Post Type Archive Links to Your Menu

Step 1 Creating a Plugin

Step 2 Loading the Plugin

Step 3 Adding the Metabox

Step 4 The JavaScript

Step 5 The AJAX Callback

Step 6 The Menu Item

Step 7 Making the Link Current

Conclusion

Step 3 Creating the Shortcode: `[series]`

`Walk`

`Display_Element`