Category Archives: Code

Use jQuery to Scroll to Anchor in an iFrame

by Posted in Code
 

I had a unique customer request to provide navigation for content within an iframe on the parent page of the iframe. This is problematic because cross domain scripting would not allow me to handle and manipulate the content in the iframe.

jQuery to the Rescue.

I am confident that this can be done in native javascript, but since my site was already using the jQuery framework, I wanted to go that route. (Work smarter, not harder).

After a bit of trial and error on how to grab the anchor tag, I changed my approach. The solution resided in simply swapping the source of the iframe to include the #achorname at the end of the URL. This would effectively “scroll” the iframe to the proper location. A bit of Googling and I located this snippet of code on jsFiddle to facilitate the URL onclick switching.

The HTML

<ul>
    <li>
        <a href="http://www.123.com/test#anchor1" onclick="return loadIframe('ifrm', this.href);">Nav 1</a>
    </li>
    <li>
        <a href="http://www.123.com/test#anchor2" onclick="return loadIframe('ifrm', this.href);">Nav 2</a>
    </li>
</ul>
<div class="iframe">
    <iframe name="ifrm" id="ifrm" src="http://www.123.com/test" frameborder="0">
        Your browser doesn't support iframes.
    </iframe>
</div>

The JavaScript

function loadIframe(iframeName, url) {
    var $iframe = $('#' + iframeName);
    if ( $iframe.length ) {
        $iframe.attr('src',url);   
        return false;
    }
    return true;
}

What we are doing is taking the href attribute of the navigation link and replacing the src attribute of the iframe. This will essentially move the iframe content to have the position the anchor at the top of the iframe window. So we don’t truly “scroll” the iframe, but we can navigate the iframe with links on the parent page.

Note: This does require knowledge of the anchor tags. It is easy to view the source to grab that info, but the originating site can change that page at any time.

How To Order Custom Post Types by Custom Taxonomy in WordPress

by Posted in Code
 

Need: To customize the display order of custom post type entries listed on a page by their custom taxonomy.

Solution: Deployed the following code on a page template in order to loop the custom taxonomies fora custom post type and display the post content.

$categories = get_terms('taxonomy_name_here', 'orderby=count&order=DESC&hide_empty=1');
 foreach( $categories as $category ): 
 ?>
 <h3><?php echo $category->name; // Prints the cat/taxonomy group title ?></h3>
 <?php
 $posts = get_posts(array(
 'post_type' => 'custom_post_type_name_here',
 'taxonomy' => $category->taxonomy,
 'term' => $category->slug,
 'nopaging' => true,
 ));
 foreach($posts as $post): 
 setup_postdata($post); //enables the_title(), the_content(), etc. without specifying a post ID
 ?>

 <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

 <div class="entry-content"> 
 <?php the_content(); ?>
 </div><!-- .entry-content -->

 </div><!-- #post-## --> 
 <?php endforeach; ?>

<?php endforeach; ?>

The string “orderby=count&order=DESC&hide_empty=1” in the first line is used to order the taxonomy labels by count with the taxonomy containing the most entries on top and taxonomies with not posts are hidden from display on the page.

To reuse this code just replace the “taxonomy_name_here” and “custom_post_type_name_here” strings with the applicable values to your WordPress setup.

This code was deployed in WordPress 3.4.1.

How to Remove the Links Menu Item from the WordPress Menu

by Posted in Code
 

Many sites and some blogs do not use the Links Manager tool in WordPress, especially those using WordPress as a Content Management System. If that is the case, you might want to remove the Links menu item from the admin area of the site altogether.

How do I remove the Links menu item from the WordPress admin?

Place the following code in the functions.php file of your active theme:

<?php
	add_action( 'admin_menu', 'mytheme_remove_menu_pages' );
	function mytheme_remove_menu_pages() {
		remove_menu_page('link-manager.php');
	}
?>

The above code will remove the Links menu item from the WordPress admin. For more information on how you can use this action to remove other menu items, see the WordPress Codex on remove_menu_page().