Saturday, February 1, 2014

As of WP Types 1.5.4, types_render_field() can't be readily used outside the main loop. If you need to use it outside the main loop, you may refer to the code below. Place it on a template file and adjust the variables.
global $post;
    
$post = get_post($post_id);
setup_postdata($post);

types_render_field('custom-field',array());

wp_reset_postdata();

Tuesday, December 3, 2013


New Google Maps


Classic Google Maps

You can display the new Google Maps using the classic Google Maps layout by following the steps below.

  1. On the new Google Maps, click the folder icon below the name of your map and choose "Export to KML".
  2. A new window will open and a file downloads. Copy the source URL of the downloaded file.
  3. In the following code, replace <kml> with the source URL in step 2.
    <iframe src="http://maps.google.com/maps?q=<kml>&output=embed" width="500" height="500"></iframe>
  4. Paste the code to your webpage.

TESTED ON : IE8-11, latest versions of Firefox, Chrome and Safari

Saturday, November 23, 2013

The following plugins cut development time by providing user interfaces for tasks which normally require coding. They also work together very well.

  • Types - Custom Fields and Custom Post Types Management 1.3.1

    This plugin provides a user-friendly interface for creating and managing custom post types, taxonomies, and fields. Custom types and their data can be easily used in templates through the plugin's well-documented API.

  • Category Order and Taxonomy Terms Order 1.3.4

    Since Wordpress doesn't currently have a drag-and-drop interface for ordering taxonomies, this plugin provides just that. It works well with hierarchical taxonomies created by Types.

  • Taxonomy Images 0.7.3

    If you need to associate photos with taxonomies, this will help you by placing photo upload fields in the taxonomy panel. Again, it works well with taxonomies created by Types.

Tuesday, September 17, 2013

Woocommerce variable product attributes may be displayed in a custom template using the following code. It is a slight modification of wp-content\plugins\woocommerce\templates\single-product\add-to-cart\variable.php.

Place it anywhere in your template and replace $post_id with the product ID.

Saturday, May 25, 2013

WP ShareThis adds social media buttons to Wordpress posts and pages. However, as of version 6.0, the Facebook Like button doesn't appear on IE8. The code below serves as a temporary fix. Simply add it to your theme's functions.php.

if (get_option('st_add_to_content') != 'no' || get_option('st_add_to_page') != 'no') {
 remove_filter('the_content', 'st_add_widget');
 remove_filter('get_the_excerpt', 'st_remove_st_add_link',9);
 remove_filter('the_excerpt', 'st_add_widget');
 
 add_filter('the_content', 'st_add_widget_fixed');
 add_filter('get_the_excerpt', 'st_remove_st_add_link',9);
 add_filter('the_excerpt', 'st_add_widget_fixed');
}

function st_add_widget_fixed($content) {
 if ((is_page() && get_option('st_add_to_page') != 'no') || (!is_page() && get_option('st_add_to_content') != 'no')) {
  if (!is_feed()) {
   return $content.'<div>'.st_makeEntries().'</div>';
  }
 }

 return $content;
}

Sunday, April 21, 2013

The function below scales an entire page in a way similar to how touch devices shrink a page to fit the screen. It uses CSS3 so most modern browsers should be compatible with it. It is experimental so make sure that you thoroughly test your pages if you use it.

/*
 * Scale a page using CSS3
 * @param minWidth {Number} The width of your wrapper or your page's minimum width.
 * @return {Void}
 */

function scalePage(minWidth) {

    //Check parameters
    if (minWidth == "") {
        console.log("minWidth not defined. Exiting");
        return;
    }

    //Do not scale if a touch device is detected.
    if (isTouchDevice()) {
        return;
    }

    //The 'body' tag should always be the parent element.
    var parentElem = "body";

    //Wrap content to prevent long vertical scrollbars
    jQuery(parentElem).wrapInner("<div id='resizer-boundary'/>");
    jQuery("#resizer-boundary").wrapInner("<div id='resizer-supercontainer'/>");

    var boundary = jQuery("#resizer-boundary");
    var superContainer = jQuery("#resizer-supercontainer");

    //Get current dimensions of content
    var winW = jQuery(window).width();
    var docH = jQuery(parentElem).height();

    scalePageNow();
    jQuery(window).resize(scalePageNow);

    //Nested functions

    function scalePageNow() {
        //Defining the width of 'supercontainer' ensures that content will be
        //centered when the window is wider than the original content.
        //Comment the following line if you need to enable the conditionals below.
        superContainer.width(minWidth);

        //Get the width of the window
        winW = jQuery(window).width();

        //Uncomment conditionals if content must be scaled only when content is wider 
        //than the window.
        //if ( winW < minWidth ) {
        var newWidth = winW / minWidth; //percentage
        var newHeight = (docH * (newWidth * minWidth)) / minWidth; //pixel
        superContainer.css({
            "transform": "scale(" + newWidth + ")",
            "transform-origin": "0 0",
            "-ms-transform": "scale(" + newWidth + ")",
            "-ms-transform-origin": "0 0",
            "-moz-transform": "scale(" + newWidth + ")",
            "-moz-transform-origin": "0 0",
            "-o-transform": "scale(" + newWidth + ")",
            "-o-transform-origin": "0 0",
            "-webkit-transform": "scale(" + newWidth + ")",
            "-webkit-transform-origin": "0 0"
        });

        boundary.css({
            "position": "relative",
            "overflow": "hidden",
            "height": newHeight + "px"
        });

/*}
    else {
      
     superContainer.css({
      "transform":"scale("+newWidth+")",
      "transform-origin":"0 0",
      "-ms-transform":"scale("+newWidth+")",
      "-ms-transform-origin":"0 0",
      "-moz-transform":"scale(1,1)",
      "-moz-transform-origin":"0.5 0.5",
      "-o-transform":"scale(1,1)",
      "-o-transform-origin":"0.5 0.5",
      "-webkit-transform":"scale(1,1)",
      "-webkit-transform-origin":"0.5 0.5"
     });
      
     boundary.css({
      "position":"relative",
      "overflow":"visible",
      "height":"auto"
     });
    }*/
    }

    function isTouchDevice() {
        return !!('ontouchstart' in window || window.navigator.msMaxTouchPoints);
    }
}

TESTED ON : IE9-11, latest versions of Firefox, Chrome and Safari

Known Limitations

  • select menus in the page will not appear where they should be on Firefox after scaling. This is a known Firefox bug.
  • The function is prevented from running on touch devices.
  • An image background applied to the body tag will not be shrunk.

Saturday, April 20, 2013

The WP Codex suggests the following usage for WP_Query.

// The Query
$the_query = new WP_Query( $args );

// The Loop
while ( $the_query->have_posts() ) :
 $the_query->the_post();
 echo '<li>' . get_the_title() . '</li>';
endwhile;

/* Restore original Post Data 
 * NB: Because we are using new WP_Query we aren't stomping on the 
 * original $wp_query and it does not need to be reset.
*/
wp_reset_postdata();

The code works. However, the the_post() function interferes with the main loop. The code breaks if you add a nested query.

Nested Queries

Nested queries are useful if you need to display related data (i.e image attachments) for each item returned by the query. Consider the following code.

$args = array('page_id' => 36);
$query = new WP_Query($args);

//Loop through the result of the first query
foreach ( $query->posts as $post ) :
      
 echo "<pre>";
 var_dump( $post ); 
 echo "</pre>";
      
 $args2 = array( 
  'post_parent' => $post->ID,
  'post_status' => 'null',
  'post_type'=> 'attachment',
  'post_mime_type' => 'image/jpeg,image/gif,image/jpg,image/png'
 );
 $query2 = new WP_Query($args2);
 
 //Loop through the result of the nested query
 foreach ( $query2->posts as $post2 ) :
  echo "<pre>";
  var_dump( $post2 );
  echo "</pre>";    
 endforeach;
       
endforeach;

By looping through the object returned by the query and not relying on the_post() function, we can perform a nested query.