Category Archives: Code Snippets

Resizing Recaptcha

RecaptchaGoogle has made it really easy to add their Recaptcha to any form, but since it’s an iframe, sizing it to fit any space becomes an issue. This is especially difficult in a sidebar, because the Recaptcha will easily stretch past anything under 300px in width. Because of the iframe, writing CSS rules for any of the internal elements is useless, so the only chance is to put it in a container and style that. Fortunately, Gravity Forms already provides a container around the iframe, in the form of a div with the class “ginput_container” and “ginput_recaptcha”. Most form plugins will provide the same container div around the iframe.

To the “ginput_recaptcha” class, I’ll add these rules:

transform: scale(0.77);

-webkit-transform: scale(0.77);

transform-origin: 0 0;

-webkit-transform-origin: 0 0;

Captcha corrected

77% seems to be the best resize, although you can scale it to whatever size you need. In this case, 77 was the perfect number, as it completely lined up with the other inputs in the form.

Reviews Format

Want to know what people are saying? Take a look at our various reviews profiles below, and feel free to leave your own comments! We greatly appreciate hearing feedback from our clients. Please note that many of these sites require accounts to discourage inauthentic reviews. To find us on Yelp, simply search “XXX” near “XXX”

*Requires Account

Google Plus

*Requires Account

Yellow Pages

*No Account Required


*Requires Account


Permanent redirect all pages to HTTPS on WordPress

In the past we have modified the standard WordPress snippet in the htaccess file to add this redirect code. It is best to add this as a separate section in the htaccess file to prevent it being overidden by security plugin or a WordPress update.

# https
RewriteEngine On
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*) https://%{SERVER_NAME}/$1 [R,L]
# end https

Getting special character HTML to show up in HTML code

If you type in something like & copy ; and then toggle back to the visual editor it will convert this to ©

Some older computers will not be able to interpret this symbol and show a question mark it its place.  To prevent this from happening we found this code on Stack Exchange.

// Custom configuration for TinyMCE
function wpsx_54398_configure_tiny_mce( $initArray ) {

    // Add some common entities to the default array (copy, reg, trade, service mark, euro)
    // The odd entires are the entity *number*, the even entries are the entity *name*. If the entity has no name,
    // use the number, prefixed with a hash (for example, the service mark is "8480,#8480").
    $initArray['entities'] = $initArray['entities'] . ',169,copy,174,reg,8482,trade,8480,#8480,8364,euro';

    return $initArray;

add_filter('tiny_mce_before_init', 'wpsx_54398_configure_tiny_mce');

Getting images to float without extra margin or page breaks

By default the WordPress visual editor will ad ‘p’ tags to all of your text and images. When you are floating an image the p tag around it can create more margin than you want, and it often ads an extra ‘br’ tag to the code which can cause spacing problems.

Add the following code to the functions.php file to prevent the IMG tags from being wrapped in a p tag.

Thanks to for this code.

function filter_ptags_on_images($content){
   return preg_replace('/<p>\s*(<a .*>)?\s*(<img .* \/>)\s*(<\/a>)?\s*<\/p>/iU', '\1\2\3', $content);

add_filter('the_content', 'filter_ptags_on_images');

How to setup on click goals in Google analytics

Use the Google Analytics Event Tracking Code Generator to create the onclick goal. Note that if you are logged in and the analytics code is hidden then clicking the link will produce an error. To test the goal make sure you are logged out.

Screen Shot 2014-03-27 at 5.00.13 PM

Click to call codeNote that we are only adding one category name when we setup the goal but we fill out several more variables in the onclick code. We do this because the onclick code requires a category, an action and a value.

Goals do NOT register immediately so after you set one up you will have to click on the phone number, then check a few days later to make sure it was recorded.

Be sure to note if the site is using an old classic analytics code you should upgrade to universal analytics.

How to add a sub page menu into the template files

The following code will produce a list of sub pages with the parent page added at the top of the menu.

	$children = wp_list_pages("sort_column=post_date&sort_order=desc&title_li=&include=".$post->post_parent."&echo=0"); 
	$children .= wp_list_pages("sort_column=post_date&sort_order=desc&title_li=&child_of=".$post->post_parent."&echo=0");
} else {
    $children = wp_list_pages("sort_column=post_date&sort_order=desc&title_li=&include=".$post->ID."&echo=0"); 
    $children .= wp_list_pages("sort_column=post_date&sort_order=desc&title_li=&child_of=".$post->ID."&echo=0");  
if ($children) { ?>
	<ul class="submenu">
		<?php echo $children; ?>
<?php } ?>

Build a lightweight slider from a custom post type

Start by adding to your theme’s function.php file. We need to add the custom post type for the slides, a custom thumbnail size for the slider, and we need to add the slider script to the header.

/**add slider script to header*/

function my_scripts_method() {
		get_stylesheet_directory_uri() . '/js/responsiveslides.min.js',
		array( 'jquery' )

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

/**custom post type for slider*/

register_post_type('slides', array(
'label' => __('Slides'),
'singular_label' => __('Slides'),
'public' => true,
'show_ui' => true,
'capability_type' => 'post',
'hierarchical' => false,
'rewrite' => false,	'query_var' => true,
'supports' => array('title', 'editor', 'thumbnail'),
'taxonomies' => array( 'post_tag')

/**add slider thumbnail size*/

if ( function_exists( 'add_image_size' ) ) { 
	//add_image_size( 'category-thumb', 300, 9999 ); //300 pixels wide (and unlimited height)
	add_image_size( 'homepage-slider', 960, 320, true ); //(cropped)

/**add slider thumbnail size*/
add_filter('post_thumbnail_html','remove_thumbnail_dimensions', 10 );
add_filter('image_send_to_editor','remove_thumbnail_dimensions', 10 );

function remove_thumbnail_dimensions( $html ) {
    $html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
    return $html;

Modify the front page template to loop through the custom post type and use the format needed for the slider. We are taking our slider code from

<ul class="rslides">
$my_secondary_loop = new WP_Query('post_type=slides');
if( $my_secondary_loop->have_posts() ): while( $my_secondary_loop->have_posts() ): $my_secondary_loop->the_post(); ?>
     <div class="slider-overlay">
     <div class="slider-content">
     <?php the_title(); ?>
     <?php the_content(); ?>
	<?php the_post_thumbnail('homepage-slider');   ?>
    endwhile; ?>
<ul id="rslides-pager">
<?php while( $my_secondary_loop->have_posts() ): $my_secondary_loop->the_post();
       //The secondary loop
      <li class="slidebtn"><a href="#">&nbsp;</a></li>    
    endwhile; ?>
<?php endif;

We have added the initialization and settings javascript into the slider script file.

$(function() {
auto: true,             // Boolean: Animate automatically, true or false
speed: 500,            // Integer: Speed of the transition, in milliseconds
timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
pager: true,           // Boolean: Show pager, true or false
nav: false,             // Boolean: Show navigation, true or false
random: false,          // Boolean: Randomize the order of the slides, true or false
  pause: false,           // Boolean: Pause on hover, true or false
  pauseControls: true,    // Boolean: Pause when hovering controls, true or false
  prevText: "Previous",   // String: Text for the "previous" button
  nextText: "Next",       // String: Text for the "next" button
  maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
  navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
  manualControls: "#rslides-pager",     // Selector: Declare custom pager navigation
  namespace: "rslides",   // String: Change the default namespace used
  before: function(){},   // Function: Before callback
  after: function(){}     // Function: After callback

Add the slider CSS to the theme’s CSS file

/* =slider styles
-------------------------------------------------------------- */

	position: absolute;
	background-color: rgba(0,0,0,0.39);


	padding: 15%;

	position: absolute;
	margin-left: -25px;
	margin-top: -45px;


#rslides-pager a{
	display: block;
	text-decoration: none;

#rslides-pager li.rslides_here {
  background: #fff;

#rslides-pager li{
background-image: none;
background-color: #0e1939;
border-radius: 10px;
width: 12px;
height: 12px;
margin: 0 2px;

.rslides {
  position: relative;
  list-style: none;
  overflow: hidden;
  width: 100%;
  padding: 0;
  margin: 0 0 25px 0;

.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;

.rslides li:first-child {
  position: relative;
  display: block;
  float: left;

.rslides img {
  display: block;
  height: auto;
  float: left;
  width: 100%;
  border: 0;

Custom styles for the slider will need to be applied from here but the slider should be working.

Customizing WordPress Image Sizes

Images on a website are often cut to exact size by a developer or designer while building a website.  Its easy to forget that you can easily customize the standard thumbnail sizes in the WordPress Media Settings.

Screen Shot 2013-12-14 at 4.37.17 PM

One of the most useful techniques is to set the large size to the width of the content area of the website so you can easily insert full width images.

You can create additional image sizes and edit the WordPress default image sizes in the functions file.

if ( function_exists( 'add_theme_support' ) ) {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150 ); // default Post Thumbnail dimensions

if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'category-thumb', 300, 9999 ); //300 pixels wide (and unlimited height)
add_image_size( 'homepage-thumb', 220, 180, true ); //(cropped)

You can also add these new image sizes to the visual editor so users can select the thumbnail size when they are inserting it into a page.

add_filter( 'image_size_names_choose', 'my_custom_sizes' );

function my_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'your-custom-size' => __('Your Custom Size Name'),
    ) );

This snippet and more information about cropping options are in the WordPress Codex for Image Sizes