Build Custom Shortcodes For Your WordPress Site

Today I am going to show you how to code custom shortcodes for your WordPress site. If you are unaware of what a shortcode is, please take a second to check it out here.

Before we start coding it is always important to first understand the problem and determine the best solution.
This is an actual solution that I came up with for one of my clients. By no means is this a definitive solution, and has been altered slightly for learning purposes.

Problem: We have a page with children (subpages). On each page there is a dropdown that contains links to each of the other children pages. Your client isn’t all that “web savy” so having him do any real coding is out of the question.

Luckily WordPresses API supports shortcodes! First we start by creating a function that will be called by the shortcode. You can add this to any page in your theme or create a plugin that reads the short codes, but today we will add the code to the functions.php file.

First we define the function:

function dropdown_func(){
	// the code goes here
}

The short code for the above would be [dropdown].
For this example we won’t be passing any arguments into the function, but just to be thorough…

First we define the function:

function dropdown_func($atts){
	extract(shortcode_atts(array('id' => 'a specific id',), $atts));
	// the rest of the code...
}

The short code for the above would be [dropdown id=X] where X is an id number.

Since we want to dynamically generate the links for the dropdown we will use global $wp_query; to get the current page’s information.

	global $wp_query; 
	$page = $wp_query->post; // the execution page

Now we add two more variables one that will hold the pages called $pages and a boolean that lets us know if the execution page is the parent page called $isParent.

	$pages = null; // array that holds the pages
	$isParent = false; // is the execution page the parent?

Next we test whether the execution page is the parent. If it is the parent, we need to obtain its children pages and set $isParent to true

	// the page is a parent
	if (!$page->post_parent){
		$pages = get_pages(array('child_of' => $page->ID)); 
		$isParent = true;
	}

We also need to check for the other possibility, that the execution page is it self a child and if so get it’s siblings.

	// is a child
	else{
		$parent = $page->post_parent; // get the parent
		$pages = get_pages(array('child_of' => $parent)); // obtain siblings	
	}

Now it is time to build the actual dropdown menu.

	//build the dropdown
	$str =  "<select>";
	foreach($pages as $p){ // loop through the collection of pages and build the dropdown options.
		$str.= "<option value='".get_permalink($p->ID)."'>".$p->post_title."</option>";
	}
	$str.= "</select>";	// close the select
	return $str;

Ok, now we have to add this method to wordpress via a shortcode hook.

	add_shortcode('dropdown', 'dropdown_func');

It works pretty good as is, but we should add some logic to determine which option is selected. To do this we will create another function that will be called as we loop through the pages and build the options. Let’s call this function: selectFn. To accomplish this, we will need the $isParent boolean, the current page in the loop, and the collection of pages itself.

function selectFn($isParent = false, $page, $pages){
	global $wp_query; 
	$thePage = $wp_query->post; // get the execution page
	
	// if is the parent, or the first of the children 
	if($isParent && $pages[0] == $page){ 
		return ' selected ';	
	}
	// if the execution page is the current page in the loop
	else if($page->ID == $thePage->ID){
		return ' selected ';
	}
	else
		return ''; // return nothing.
}

now we need to call the new function!

	$str.= '<option value=" '.get_permalink($p->ID). '"'.selectFn($isParent, $p, $pages). '>' .$p->post_title .'<option>';

so lets see it all put together…

function dropdown_func(){
	global $wp_query; 
	$page = $wp_query->post; // the execution page
	$pages = null; // array that holds the pages
	$isParent = false; // is the execution page the parent?

	// the page is a parent
	if (!$page->post_parent){
		$pages = get_pages(array('child_of' => $page->ID)); 
		$isParent = true;
	}

	// is a child
	else{
		$parent = $page->post_parent; // get the parent
		$pages = get_pages(array('child_of' => $parent)); // obtain siblings	
	}

	//build the dropdown
	$str =  '<select>'; // start the select
	
	foreach($pages as $p){ // loop through the collection of pages and build the dropdown's options.
		$str.= '<option value=" '.get_permalink($p->ID). '"'.selectFn($isParent, $p, $pages). '>' .$p->post_title .'<option>';
	}
	$str.= '</select>';	// close the select
	
	return $str;
}

function selectFn($isParent = false, $page, $pages){
	global $wp_query; 
	$thePage = $wp_query->post; // get the execution page
	
	// if is the parent, or the first of the children 
	if($isParent && $pages[0] == $page){ 
		return ' selected ';	
	}
	// if the execution page is the current page in the loop
	else if($page->ID == $thePage->ID){
		return ' selected ';
	}
	else
		return ''; // return nothing.
}

add_shortcode('dropdown', 'dropdown_func'); // add the shortcode hook

And there you have it! Hope this tutorial was helpful. Please feel free to ask questions, or leave feedback (constructive only please). I will be posting a live example once the actual site goes live.