Victor Font Consulting Group, LLC

The DEX Intranet Specialists

Code Snippets

Remove WordPress Script Query Strings

By

Remove Script Query Strings from WordPress image, public domain image from pixabay.com

Speed… speed… speed… it's all about speed… or is it? For years, the speed in which your site loads has been one of the many "ranking signals" search engines use to assess where your site will display on their search results page. If your site loads too slowly, it will be demoted in the results.

To get the best performance out of a site, developers rely on a number of testing sites that flag potential issues and offer suggestions on how to improve performance. One very popular site is GTMetrix. When you test your site through GTMetrix, it displays the results of Google PageSpeed and Yahoo YSlow. And when it comes to a WordPress site, in almost every case you will see the following red flag for "Remove query strings from static resources":

Remove Query Strings recommendation image

As you can see from the image, every file that displays a query string is either a CSS or JavaScript file. This is because the default behavior for the WordPress wp_enqueue_script function is to append a string specifying the script version number. If the developer added a version number, it is concatenated to the end of the path as a query string. If no version is specified or set to false, then WordPress automatically adds a version number equal to the current version of WordPress you are running. The default setting is false. If the version variable number is set to null, no version number is added, but this requires a purposeful action on behalf of the developer.

If you add the following code to your theme's functions.php file, you will remove the query string version numbers from all of your scripts at once, which in turn results in an improved score in Google PageSpeed.

Alternate Code

As an alternative, this code snippet works just as well as the above.

If everything works as expected, the next time you test your site with Google PageSpeed, you should receive results as follows:

Great Google PageSpeed reults with query strings removed

If testing still shows static resources with query strings, this means that the developers may have bypassed wp_enqueue_script in favor of directly calling the CSS or JavaScript file.

Genesis HTML5 Go To Top Source Code

By

This source code is for the Geneis HTML5 "Return to Top" Tutorial article. In the original article, I included screen prints of the source and links to another site that has now become a paid membership site. This source code below is complete and will provide the Return to Top scrolling for Genesis HTML5 themes.

Formidable Pro Rename Upload File

By

Formidable Pro Rename Upload File-public domain image from pixabay.com
As of the release of Formidable Pro V2.02, the process described in this article will no longer work. The Formidable Pro developers abandoned the standard WordPress upload functions in favor of a drag and drop jQuery Ajax uploader. While this is more efficient, it offers significant challenges because the files are uploaded before the form is submitted. When time permits, I'll look into a method for renaming files with this new process. In the meantime, the original article is below and will work with Formidable Pro versions released prior to V2.02.

When Michael Jenson needed help customizing the name of image uploads through a Formidable Pro form, Stephanie Wells of Strategy 11, the author of Formidable Pro, recommended that he contact us for assistance. We do a lot of custom Formidable Pro work and know the product well. Michael's form is located at http://cameraclub.photos/exhibition-upload/. His request:

What I’m looking for is to take all of the fields from this form (except email address) and use them to rename a jpeg image file upon upload. I have several clients who are camera clubs and they are requesting this functionality.

This is a screen print of Michael's form:

Exhibition Upload Form

To clarify the requirement, I responded:

So let’s say I upload an image in category aa, you want the image name to be: victor-font-aa-imagename-open-digital.jpg. Is that correct?

Michael confirmed his requirement and shortly thereafter, I sent the following code to him for testing with instructions to copy it into his child theme's functions.php file.

rename_imagehttps://gist.github.com/vfontjr/199632e7e3d1447c4aeb0510e1b25dec#file-rename_image-php

Michael's response:

This worked awesome!

This Can Work With Most Any Form

The beauty of this code is that with a little modification it could work with any form that uses the WordPress upload process as Formidable Pro does. You would have to determine how your form tool identifies its forms and the naming convention for the fields. The code intercepts and sanitizes the filename just before WordPress saves it. If you need help, you can always reach out to us.

To learn more about PHP's pathinfo() function visit: http://www.w3schools.com/php/func_filesystem_pathinfo.asp
To learn more about the sanitize_file_name filter visit: https://codex.wordpress.org/Function_Reference/sanitize_file_name

Enable Sidebars in Atmosphere Pro

By

Genesis Framework Layouts

The Studio Press Atmosphere Pro child theme is a minimalist design. As a minimalist theme, Atmosphere Pro is designed to only display its content in the Genesis full screen layout. Two frequently asked questions about Atmosphere Pro are, "How can I enable sidebars?" or "What plugin can I use to create a sidebar?"

Keep in mind that these questions are being asked about the fully featured Genesis Framework. You do not need a plugin. There are six layouts built into the Genesis Framework as depicted in the above image. The six layouts starting at the top left and moving clockwise are:

  • Full Screen Content
  • SideBar-Content
  • Content-Sidebar
  • Content-Sidebar-Sidebar
  • Sidebar-Content-Sidebar
  • Sidebar-Sidebar-Content

These layouts are always available to child themes. If a child theme does not display a specific layout, it is because the theme author decided to disable that particular layout. Theme authors can disable specific Genesis Framework layouts by unregistering them in the child theme's functions.php file. If you open and view Atmosphere Pro's functions.php file, you will see the following code around line 106:

To enable the sidebars and additional layouts in Atmosphere Pro, either comment out or remove the above code from functions.php.

Keeping the Home Page Full Width

Out of the box Atmosphere Pro forces full-width content for the entire site. Since you want to use sidebars, this needs to change. Comment out the following code in functions.php:

In most cases, users prefer to leave the Atmosphere Pro home page in full width mode. Since we commented out the full-width content in functions.php, we need to move this code to front-page.php:

Adding the Sidebar CSS

Since Atmosphere Pro is designed as a minimal full-width site, its style.css file has no support for sidebars. This support needs to be added back. The easiest way is to copy sidebar CSS from another Studio Press theme, in this case I'm using the CSS from Executive Pro.

First, look for the .site-inner css in style.css and overwrite what's there with the following code:

Next, add the following sidebar code to style.css:

Mobile CSS

The media query CSS below is from the latest Genesis Sample Theme. Merge the CSS below into the media queries for your theme and adjust it until it works for your situation.

This should all get you started on the right path. Since everyone has their own preferences, you'll have to further tweak the CSS to achieve the look and feel you desire, but at least you have the foundation.

AdWords Call Tracking for Genesis Themes

By

AdWords Call Tracking for Genesis Themes, public domain image from pixabay.com

Tracking phone calls generated from your website is an important metric. How else will you learn how effective your ads are in leading to phone calls from your website that ultimately lead to conversions? Granted, not every call that comes from a website is the result of an ad. Many calls are organic, meaning they've been driven by the site itself and the content you publish. Regardless of the vehicles that lead to a phone call, it's still nice to know how many of those calls result from a click through on your website.

With the addition of Google AdWords Call tracking to your site, you can track calls that originate from your site or mobile devices. The instructions for adding the Google AdWords tracking code to your site are pretty straightforward. Straightforward, that is, if you have a plain vanilla, generic type of website. If you are using a professional developers' tool like the Genesis Framework, Google's instructions may not apply to you. We've written this article to help you install the Google AdWords call tracking code into your Genesis based child theme.

First Method—Don't Try This at Home

One way of attempting to add the code is with the genesis_attr_body filter:

As simple as it is, the problem with the above code is that it doesn't work. When passed through the filter, it does indeed add the AdWords function to the <body> tag. However, it also sanitizes the code and converts the required single quotes within the function into their respective HTML entities (&039). So the resulting HTML looks like this:

It's not very pretty. It definitely won't work. And we haven't been able to find a work-around.

Second Method—JavaScript

While we're not going to repeat anything you can already learn from the Google AdWords Call Tracking site, one thing their site omits is the fact that you can install their function with a JavaScript snippet. The function below is added to your site's header area. In Genesis you can do this in several ways. You can navigate to the Genesis/Theme Settings admin page and copy the code into the header script meta box. You can also add the code through the Genesis Simple Hooks plugin. Or last, you can create code to add the script through your functions.php file.

Third Time's the Charm

The third method, and the one that we prefer, is to add the code directly to header.php. Genesis child themes typically do not have a custom header.php. Header.php is found in the Genesis directory. Since this is core code, you must not under any circumstances edit this file directly. Doing so will create a multitude of problems for you when the Genesis Framework is updated. You can, however, copy header.php into the root folder of your child theme and then edit that file. The code below is an edited header.php from Genesis Version 2.2.3 that you can copy and paste into the child theme directory. Lines 21 and 22 show the modifications. Change the number to your own.

Also note that future versions of Genesis may render this code obsolete. We'll do our best to keep this code updated as new versions of the framework are released.

Add Custom Image Sizes to Media Library

By

Media Library Custom Image Size

When you upload an image to the WordPress Media Library, WordPress creates any number of new images either scaled to or cropped from your original image. The number of images that are created are determined by the WordPress defaults, your theme's configuration, or plugins. This article focuses on the default WordPress settings and how you can add new image sizes to the media library attachment display settings.

Post Thumbnails

Post thumbnails (now called featured images) were introduced in WordPress Version 2.9. A featured image is the representative image for a Post, Page, or Custom Post Type. The display of a featured image is controlled entirely by the site's theme. The theme has to specifically declare its support for featured images by using the following code in functions.php.

Thumbnail Sizes

When you upload an image, WordPress creates three default thumbnails in addition to the original image. The default thumbnails are Thumbnail, Medium, and Large. Their sizes are:

  • Thumbnail—default 150px x 150px max
  • Medium resolution —default 300px x 300px max
  • Large resolution—default 640px x 640px max
  • Original image resolution—unmodified

The default sizes of these images can be changed through the Admin/Settings/Media page:

WordPress Media Settings

If you click on the screen print above, you'll see that we've redefined the Large image size to be 1024px x 1024px for this site. Also if you check "Crop thumbnail to exact dimensions (normally thumbnails are proportional)", the thumbnail images will be cropped to the exact dimensions specified whenever possible.

Add Custom Image Size

There are two steps that need to be taken to create a new image size to have it appear in the media library attachment display settings. First, you have to register a new image size. This is done with the WordPress add_image_size function. The syntax is:

The second step is to apply the new image to the image_size_names_choose filter.

Add the code below to your functions.php and you'll have a new image size in your media library attachment display settings.