All posts by acrane
List Child Pages in WordPress if you have any.
List Child Pages in WordPress if you have any.
<?php
/*
* Get the Child pages if you have any.
*
*
*/
$children = get_pages('child_of='.$post->ID);
if( count( $children ) != 0 ) : ?>
<div class="list-sub-pages">
<?php
$mypages = get_pages( array(
'child_of' => $post->ID,
'sort_column' => 'post_date',
'sort_order' => 'desc'
));
foreach( $mypages as $page ) { ?>
<li><a href="<?php echo get_page_link( $page->ID ); ?>"><?php echo $page->post_title; ?></a></li>
<?php } // end for each ?>
</div><!-- list sub pages -->
<?php endif; ?>
Automatically add a first and last class WordPress menu items
This function gives the first and last WordPress menu items a class of “first” and “last”.
Note:
You can always go and add your own classes directly to the menu items yourself by going to Appearance > Menus, make sure you have the css classes option turned on in screen options at the top of your page, and enter the class of your choice.
But this function does this automatically. This is good if the client is going to be adding to the navigation. Place in your theme’s functions file.
// Add a last and first menu class option
function ac_first_and_last_menu_class($items) {
foreach($items as $k => $v){
$parent[$v->menu_item_parent][] = $v;
}
foreach($parent as $k => $v){
$v[0]->classes[] = 'first';
$v[count($v)-1]->classes[] = 'last';
}
return $items;
}
add_filter('wp_nav_menu_objects', 'ac_first_and_last_menu_class');
Style last item with a different class in a loop
This example styles the last item in a loop with a different list class in an Advanced Custom Field ( acf ) repeater in ACF Options page. It allows you to add as many emails as you want with the last one not receiving the class that gives the border or pipe in the list.
<?php
// get the count
$last = count(get_field('emails','option'));
// loop through repeater
if(get_field('emails','option')) : ?>
<?php $x=1; while(has_sub_field('emails','option')) : ?>
<?php
// if is not the last list item
if($x != $last) {
$islast = 'not-last';
} else { // else it is the last list item
$islast = 'last';
} ?>
<li class="<?php echo $islast; ?>">
<?php $email = get_sub_field('email', 'option'); ?>
<a href="mailto:<?php echo antispambot($email); ?>">
<?php echo antispambot($email); ?>
</a>
</li>
<?php $x++; endwhile; // count up x and end while loop ?>
<?php endif; ?>
Add Vcard support to your WordPress file upload ACF
How to enable Vcard support to your WordPress theme because it won’t let you!
Add this function to your theme’s functions file
/*
Add V card support
_______________________________________________
*/
add_filter('upload_mimes', 'custom_upload_mimes');
function custom_upload_mimes ( $existing_mimes=array() ) {
// add your extension to the array
$existing_mimes['vcf'] = 'text/x-vcard';
return $existing_mimes;
}
Then add this line to your htaccess file:
AddType application/octet-stream vcf
Now your site will allow you to upload Vcards
jQuery sticky sidebar on scroll
This jQuery will make your sidebar stick when you scroll to the top by adding a class of “fixed” to the sidebar div. You can then add the appropriate css to the class to make it stick.
var top = $('.sidebar').offset().top - parseFloat($('.sidebar').css('marginTop').replace(/auto/, 0));
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, ad the fixed class
$('.sidebar').addClass('fixed');
} else {
// otherwise remove it
$('.sidebar').removeClass('fixed');
}
});
jQuery click toggle by adding and removing classes
and it still has an animated property.
$(".artist-bio-readmore" ).click( function(event){
event.preventDefault();
if ($(this).hasClass("isup") ) {
$(this).parent('.artist-bio').animate({ "max-height": "1000" }, 200);
$(this).removeClass("isup");
$(this).addClass("isdown");
} else {
$(this).parent('.artist-bio').animate({ "max-height": "50" }, 200);
$(this).addClass("isup");
$(this).removeClass("isdown");
}
return false;
});
jQuery Toggle
$('.expand-this-div').hover(
function(){
$(this).animate({ "max-height": "1000" }, 'fast');
},
function() {
$(this).animate({ "max-height": "0" }, 'fast');
});
How to load jQuery correctly in WordPress and not get any conflicts.
I finally had my aha moment with jQuery and WordPress themes. I used to think one would want to deregister the WordPress jQuery that comes with your WordPress installation, then enqueue Google’s version so that sites would load faster. I have finally decided against this as it leads to too many conflicts with potential plugins.
Here is what you should be doing instead. How to load jQuery in WordPress correctly and not get any conflicts as well as how to load other jQuery custom files and what you should do to have them load correctly.
First, to include jQuery and other custom scripts in your theme, you simply enqueue the latest jQuery and your other scripts like this:
// Enqueueing all the java script in a no conflict mode
function ineedmyjava() {
if (!is_admin()) {
// Include jQuery included with WordPress
wp_enqueue_script( 'jquery' );
// Custom Theme scripts...
wp_register_script(
'custom',
get_bloginfo('template_directory') . '/js/custom.js',
array('jquery') );
wp_enqueue_script('custom');
// Homepage slider 'flexslider' scripts...
wp_register_script(
'flexslider',
get_bloginfo('template_directory') . '/js/flexslider.js',
array('jquery') );
wp_enqueue_script('flexslider');
// Add more
// between here
}
}
add_action('wp_enqueue_scripts', 'ineedmyjava');
Ok, so that loads your jQuery, your custom jQuery scripts, and your flexslider in the example above. So how do you set up your custom scripts so they actually work?
Here’s how:
If you’re loading the above scripts in your header, put all your custom scripts between the document ready function like this:
/**
* Custom jQuery Scripts
*
*/
jQuery(document).ready(function($){
// All your custom scripts here
// front page slider
$('.flexslider').flexslider({
animation: "slide",
}); // end register flexslider
});// END ##################################### END
But if you decide to load them in the footer, include them like this:
/**
* Custom jQuery Scripts
*
*/
(function($){
// All your custom scripts here
// front page slider
$('.flexslider').flexslider({
animation: "slide",
}); // end register flexslider
}(jQuery));// END
And there you have it. No conflicts…
Loop through taxonomies and display taxonomy acf image
Loop through all terms of a taxonomy and display the advanced custom field acf image object as a taxonomy image.