Lately I’ve been programming a lot of open/close drawers for websites. Many of them are simple and had a single button that opened and closed a single drawer. The slideToggle() method in jQuery with some nice easing worked wonderfully for accomplishing this, however as some of these projects required additional content to be opened/closed things quickly go down hill. See the code below to see what I mean.

Check out this Pen!

jQuery Slide Toggle Problem #2

One way around this is to use the callback function available to us in the slideToggle method that will fire once the slide is complete. Unfortunately many different combinations of slideUp and slideDown will all reveal various transition issues when the goal is to fully close a drawer before opening a new one. See the code below for adjustments to the problem #1.

Check out this Pen!

jQuery Slide Toggle Problem #3

I found that if reversed the logic to slideUp all divs and slideDown the matching div in the callback we get a lot closer to the correct timing, but it also creates a problem for us when clicking on an already open drawer. Adding a delay to the complete/callback function helps to smooth out the timing when switching between drawers as well but this is not a very predictable solution. If you remove the delay in the code below you’ll see how it helps.

Check out this Pen!

jQuery Slide Toggle Solution

Ultimately .slideToggle() is very rarely going to be used on it’s own to solve problems like this. In this case the solution is to use a little known jQuery method called .promise(). The .promise() method is tremendously useful because it will wait for any set of matched elements to completely finish animating, even if multiple animations are present.

Check out this Pen!

The post jQuery Promise and slideToggle Method Enlightenment appeared first on adammunns.com.

Action Hook Overview

There are two types of hooks in WordPress and we will cover the more complicated and confusing filter hook. Action hooks are the other type and are used primarily for inserting content into template areas that may be otherwise inaccessible. For example from a plugin, you want to inject some content into the footer of your page. You would do something like this, which is directly from the codex:

function your_function() {
echo 'This is inserted at the bottom';
}
add_action('wp_footer', 'your_function');

In the above code we are using the add_action call to specify which hook–or “location” for lack of a better term–is going be used when we call our function in the second argument. ‘your_function’ could easily be ‘my_function’ or ‘silly_nilly’ as long as it matches the name of the actual function you are defining to do something in the specified location.

The add_action call can also come before or after the function definition, it does not matter.
You test this code by placing it in the functions.php file of your current theme.

The Mighty Filter Hook

I find that it can be frustrating having to use a filter hook when all I want is to insert some content somewhere. This is because filter hooks are a bit trickier and must return a value. There is a very good explanation on stack exchange  between the two, The difference between filter and action hooks

Since the point of this post is to show beginners how to use a filter hook we are only going to skim the surface of what is possible, in this case we are going to treat it like an action hook and simply insert some content into a template area.

In the PageLines framework we can reference filters here: PageLines API Hooks

Now since there is no action hook that can be applied to the area just after the post metabar we will use a filter instead to add content.

add_filter('pagelines_post_metabar', 'my_metabar_addition');

function my_metabar_addition($metabar){
$metabar .= 'Added Content';
return $metabar;
}

The above code takes a custom function and adds to the variable which contains the output of the metabar. If we had used

function my_metabar_addition($metabar){
$metabar = 'Added Content';
return $metabar;
}

Our metabar would simply say “Added Content” because we would have reset the variable $metabar instead of adding to what output already exists in the core files. By using the dot before the equal sign we concatenate the two values.

The post WordPress Filter Hooks: A Beginner’s Guide appeared first on adammunns.com.

1. There is NO

   is_blog()

   conditional tag — using this will break your theme.

2. To target the main blog page you must use

   is_home()

   — do not confuse with

   is_front_page()

   which will target your home page if you are not using the blog page as your home.

3. To target all other blog pages and single pages you can use

   is_single() || is_archive()

Happy conditionalizing!!

Resources for WordPress conditional tags:

WordPress Codex

ThemeLab Ultimate Guide

The post Quick Reminder on WordPress Conditionals appeared first on adammunns.com.

http://codex.wordpress.org/Template_Tags/previous_post_link

It also shows you how to customize the text of the link by changing the default

<!--?php previous_post_link(); ?--> 

to

 <!--?php previous_post_link('%link', 'Previous in category', TRUE); ?-->

where the link contains custom text and even remains in the same category of the current single post. Now putting it all together if you wanted to maintain the same default post navigation (where the link contains the title of the next/previous post) while also remaining in the same category you can do something like this:

 <!--?php previous_post_link('%link', '%title', TRUE); ?-->

For PageLines users you can edit your default navigation by creating a file in your PlatformBase theme called template.postnav.php and pasting the below code in it so that your post-navigation remains category dependent. Of course by editing in the child theme you won’t have this small change overwritten when it comes time to update your core files.

<div class="post-nav fix"></div>

The post WordPress Post Navigation Within Same Category appeared first on adammunns.com.

I’m not going to cover how to set up the carousel using the jcarousel jquery plugin by Sorgalla because there is enough instruction out there on how to do it. However I am going to show you how to use this carousel to display an image based archive carousel in WordPress.

The code

$archives = wp_get_archives(array('echo' => 0,'format'=>'html','type'=>'monthly','before'=>'|'));
$archive = explode('|',$archives);
$remove = array_shift($archive);

foreach($archive as $i):
$i = strip_tags($i);
$month = preg_replace('/[^a-z]/i', '', $i);
$month_int = date('m', strtotime($month));

if ($month === "February") $month_int = 2; //fixes weird PHP bug

$year = preg_replace('/[^0-9]/i', '', $i);

$query = new WP_Query('meta_key=_thumbnail_id&posts_per_page=1&monthnum='.$month_int.'&year='.$year.'&paged='.$paged);
while ($query->have_posts()) : $query->the_post();
?>

 

<!--?php <br ?--> endwhile;
wp_reset_postdata();
endforeach;

The above code is what you would want to place inside of the main ul which holds your carousel.

How it Works

The wp_get_archives() function in WordPress by default will return an archive based list in the format of “February 2011, January 2011, etc”. Using the ‘before’ parameter we are able to insert an element at the beginning of each list item which we can then use to break our list into an array using the explode function in conjunction with the before parameter from wp_get_archives as the delimiter.

Using the before parameter as a delimiter actually creates a an null value in the first array position. To fix this we use the array_shift function to remove the first array item and recalculate the positions starting at zero.

Next we loop through the array values [0]=>February 2011 [1]=>January 2011, etc and perform two separate preg_replace functions to isolate the month from the year. After turning the month name into the corresponding integer ( e.g. January -> 01 ) we can use the integer values for the month and year to perform a custom loop that will query these dates

new WP_Query('meta_key=_thumbnail_id&posts_per_page=1&monthnum='.$month_int.'&year='.$year.'&paged='.$paged);

Notice that in this query we are only pulling posts that have

meta_key=thumbnail_id

so that none of our carousel items come back blank. We also only return one post per page so that only one thumb represents each month/year combo.

Finally we just loop through and setup the category link, the archive title, and thumbnail

<!--?php while ($query--->have_posts()) : $query->the_post(); ?>

<!--?php endwhile;?-->

PageLines Carousel Hook

If you are using PageLines you can easily use the above code as it is in conjunction with the pagelines_carousel_list action hook that works with the default carousel section so that you can use custom carousel content as we did above.

The post How To Create Archive Carousel with Thumbnails appeared first on adammunns.com.

A common request of many people using the PageLines feature slider is to make the entire feature staging area clickable. The default action for the “Feature Link URL” option is to create the black button featured below.

If you want to forego the simple button by making the entire area clickable you must do two things.

Using the Before Feature Hook

Add the small block of code to your PlatformBase functions.php file.

add_action('pagelines_feature_before','whole_link_image');

function whole_link_image(){?>
<!--?php global $post;?-->

<!--?php if(get_post_meta($post--->ID, 'feature-link-url', true)):?>

<!--?php endif;?-->
<!--?php }<br ?--> 

The CSS

a.whole_image_link {
position:absolute;
width:100%;
height:100%;
z-index:9999;
left:0; /*Firefox fix*/
}

What we’ve done is taken the pre-existing PageLines option for linking the feature slide and used that to create an empty link that overlays the entire staging area.

For a little added bonus you could even apply a cool CSS3 inner box shadow hover effect.

a.whole_image_link:hover {
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
}

The post Create A Fullwidth Clickable Feature Slider appeared first on adammunns.com.

Simply place this snippet below in your theme’s functions.php file. This will save you time from having to modify or change the comments.php just to make a small wording change.

function my_comment_text ($arg) {
$arg['title_reply'] = __('Submit Your Comment');
return $arg;
}
add_filter('comment_form_defaults','my_comment_text');

The post Quickly Change “Leave A Reply” Text in Comments appeared first on adammunns.com.

Next, using an FTP program like Transmit or Filezilla copy the template.postloop.php file from the main PlatformPro theme and move it into the root of the PlatformBase theme. You should now have two files both called template.postloop.php in both the PlatformPro and PlatformBase themes. By editing this file in the child theme you won’t have to worry about your custom changes getting overwritten in the next upgrade to the core files.

Now that we are edit-ready open up the template.postloop.php file in a text editor of your choice.

Find this block of code:

<div class="post-header fix <?php if(!pagelines_show_thumb($post->ID)) echo 'post-nothumb';?>" style="<?php 
							
		if(pagelines_show_thumb($post->ID)){
			echo 'margin-left:'.$thumb_space.'px';
		}
							
?>" >

and change it simply to

<div class="post-header fix">

Now that we’ve gotten rid of the snippet that adds our left margin to the excerpt, we need to clear this so it isn’t overlapping the thumbnail.

In the base.css file add:

.fpost .post-header {
	float: none;
	clear: both;
	padding-top: 10px;
}

Remember that you can change the size of your post thumbnails by going to your WP SETTINGS – MEDIA panel.

The post How to Put PageLines Post Thumbnails On Top of Titles appeared first on adammunns.com.

Luckily the fix is very simple. Change your date output e.g.

<?php the_date('j M Y');?>

to the WordPress time function e.g.

<?php the_time('j M Y');?>

Also, don’t forget all of the options available for modifying the output : Codex : Formatting the Date and Time

The post Custom Loop Won’t Show the Publish Date appeared first on adammunns.com.

The CSS Setup

First open up your base.css file in the PlatformBase child theme and make sure that you are using the “Squares or Dots” navigation mode, which is set under the global PlatformPro Feature Settings.

The important thing about the CSS here is that we are changing the position of the feature navigation so that it sits on top of the feature slide area instead of directly beneath it. We are also including a transparent black background for the feature navigation as well as an image sprite to replace the default circles/squares.

Place the transparent background and image sprite in the images folder in your Base theme for the code below to work

#feature #feature-footer {
	position: absolute;
	bottom: 0;
	background: url('images/black60.png') repeat;
	z-index: 999999;
	border: 0;
	width: 100%;
}
	
#feature-footer .feature-footer-pad {border:0px;}

	/*FEATURE DOTS*/
		#featurenav a {border:0px!important;background:transparent;}

		#feature #feature-footer a, #cycle_navigation a {
			background:url('images/glass_buttons.png') no-repeat center top transparent;
			width:20px;
			height:20px;
		}
		
		#feature #feature-footer a:hover, #cycle_navigation a:hover  {
			background:url('images/glass_buttons.png') no-repeat center center transparent;
		}
		
		#feature #feature-footer a.activeSlide, #cycle_navigation a.activeSlide  {
			background:url('images/glass_buttons.png') no-repeat center bottom transparent;
		}

The Images

To make it easy for you, you can save the images below to your own server to get this demo working quickly.

The jQuery

Then next step is to add a touch of jQuery to hide and show the navigation when hovering off and on the whole feature area.

Use a hook in your functions.php file to accomplish this.

add_action ('wp_footer','animate_feature_nav');

	function animate_feature_nav(){?>

		<script type="text/javascript">

			var $j = jQuery.noConflict();
			$j(document).ready(function() {
				$j('#feature-footer').hide();
				$j('#feature_slider').hover(function(){$j('#feature-footer').fadeToggle("slow", "linear")});
			});

		</script>

	<?php }

That’s it! You have a new custom feature section that is perfect for an auto playing image gallery or portfolio.

The post Create A Hover Effect For Your Feature Navigation. appeared first on adammunns.com.