code

Fixing The Navigation Sorting For WordPress Custom Posts

Wordpress

While building Lightstorm, my soon to be released custom WordPress theme, I added next and previous links to the bottom of each individual custom post item. In this case I wanted to build a portfolio and to enable the user to click backwards or forwards through the entire portfolio. I added the WordPress next and previous links code thinking it was a nice easy job and then realised that the links were not taking our portfolio custom sorting into account. Oh.

Having googled the problem I couldn’t find exactly what I was looking for so I set about writing some of my own code to fix this and here it is for you to use to.


<?php 
	global $post;
	$prev_title = "";
	$next_title = "";
	
	$args = array(
    'orderby'         => 'menu_order',
    'order'           => 'ASC',
    'post_type'       => 'portfolio',
    'post_status'     => 'publish' ); 
    
	
    $myposts = get_posts( $args );
	$arr = array();
	
	foreach( $myposts as $post ) :	setup_postdata($post); 
		//build array of posts
		$arr[] += $post->ID;		
	endforeach;

	wp_reset_query();

	//find index of current post id in the array
	$currentIndex = array_search($post->ID, $arr);
	$prevIndex = $currentIndex-1;
	$nextIndex = $currentIndex+1;
	$maxNumber = count($arr) - 1;
	
	//show the links
	if($currentIndex != 0){
		$prevID = $arr[$prevIndex];
		$prev_title= "«« ".get_the_title($prevID);
		$prev_permalink = get_permalink($prevID);
	}


	if($currentIndex != $maxNumber){
		$nextID = $arr[$nextIndex];
		$next_title= get_the_title($nextID)." »»";
		$next_permalink = get_permalink($nextID);
	}
	
	echo "<div class='navigation'>";
	echo "<div class='five columns alpha'>";
	echo "<a href='".$prev_permalink."'>".$prev_title."</a>";
	echo "</div>";
	echo "<div class='five columns omega'>";
	echo "<a href='".$next_permalink."'>".$next_title."</a>";
	echo "</div>";
	echo "</div>";
?>

If there is a better way of doing this we’d love to know.

Custom Widget Checkboxes Not Staying Checked

Wordpress

During the process of writing a few custom widgets for a custom WordPress theme I found a frustrating problem when using a checkbox as one of the widget options. The checkbox was functioning properly but when it was checked and then the widget options saved it was being unchecked.

The answer is really simple but I had a bit of trouble finding the solution – you have to make sure that the value saved is of the correct type, in this case a boolean as shown in the following code.


<input class="checkbox" type="checkbox" <?php checked( (bool) $instance['photo'], true ); ? > id="<?php echo $this->get_field_id( 'photo' ); ?>" name="<?php echo $this->get_field_name( 'photo' ); ? >" / > 

Showing The Active Page With The WordPress Menu Walker

Wordpress

Just the same as many other WordPress developers when it came to building and modifying themes I really needed to be able to customise the menu. I found a few tutorials on extending the WordPress Walker to add a button description, most notably this one by Kriesi but I couldn’t find too much about showing the active page.

To start with what is the Walker class? I’ll let the WordPress Codex explain:

The Walker class encapsulates the basic functionality necessary to output HTML representing WordPress objects with a tree structure. For instance, pages and categories are the two types of objects that the WordPress 2.2 code uses the Walker class to enumerate.

There are two parts to getting this to work. Firstly including the code in the custom menu walker class to ensure the correct WordPress classes are assigned to your button. WordPress already adds a unique class to the active item, we just need to make sure it is also added in our class.


$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$class_names .= in_array("current_page_item",$item->classes) ? ' active' : '';
$class_names = ' class="'. esc_attr( $class_names ) . '"';
$output .= $indent . '<li id="menu-item-'. $item->ID . '"' . $value . $class_names .'>';

The second part is simply to add the appropriate style to our css file:


#menu-main li.active{
 border-bottom: 4px solid #00CCFF;
}

And that is it 🙂

If you’d like a copy of the full navigation class [sm mailto=”emily@brainstormcreative.co.uk” txt=”shoot me an email”] and I’ll send you the file.