Yesterday, WordPress released version 4.7 of their popular web software platform. The free WordPress training videos available on victorfont.com have been updated to reflect the many changes to this release. If you haven't signed up yet for this great series, please feel free to do it now by clicking the above link.
Formidable Pro: Invoke Ajax on Submit
The Problem
A client asked for help with invoking a jQuery ajax function during the submit of a Formidable Pro form. The client had written an elaborate jQuery routine that was triggered in $(document).on('submit'). The goal for the ajax call was to retrieve a confirmation number from a database. The ajax function needed to pass the values from the form's data entry fields to the processing script on the server. This is why the developer chose to use document on submit. When the confirmation number is returned from the server to the client, the value is written to a hidden field on the form as well as a display element on the form's success page. When saved, a PDF version of the form was created with the FormidablePro2PDF plugin and made available for download through a link on the form's success page.
This is a complex process and the results were very inconsistent. The confirmation always displayed on the success page, but almost never got written to the form entry in the database nor would it display on the PDF version of the form. We were tasked to figure out what was happening.
Had we been contracted to write the code in the first place, we probably would have opted to use Formidable Pro's built-in hooks, such as frm_pre_create_entry or something else that fires before the data is written to the database. But since, jQuery/Ajax was chosen as the vehicle to complete this process, we needed to fix it so it worked consistently.
The Analysis
To analyze this problem, it is critical to understand two important concepts:
First, the JavaScript interpreter is a synchronous engine. Synchronous means that the JavaScript interpreter executes only one line of code at a time in succession. It continues to execute one line at a time until the script is finished. It is not capable of asynchronous execution, meaning that it cannot execute multiple lines of code at a time. By now you're probably thinking, "Whoa! What about ajax? Doesn't the 'A' in ajax mean asynchronous?" Yes it does, but it doesn't mean asynchronous in the way you may be thinking.
This brings us to our second key concept. When we think of a browser, we may think of it in terms of the browser engine such as Blink, EdgeHTML, Gecko, or Webkit, but browsers are actually composed of multiple engines. Take a look at the reference architecture diagram from Reference Architecture for Web Browsers by Alan A. Grosskurth and Michael W. Godfrey from the School of Computer Science, University of Waterloo in Canada:
Some of the browser's components are:
- The user interface: this includes the address bar, back/forward button, bookmarking menu etc. Every part of the browser display except the main window where you see the requested page.
- The browser engine: the interface for querying and manipulating the rendering engine.
- The rendering engine: responsible for displaying the requested content. For example, if the requested content is HTML, it is responsible for parsing the HTML and CSS and displaying the parsed content on the screen.
- Networking: used for network calls, like HTTP requests. It has a platform independent interface and substructure implementations for each platform.
- UI backend: used for drawing basic widgets like combo boxes and windows. It exposes a generic interface that is not platform specific. Underneath it uses the operating system user interface methods.
- JavaScript interpreter: Used to parse and execute the JavaScript code.
- Data storage: This is a persistence layer. The browser needs to save all sorts of data on the hard disk, like cookies for example. The HTML5 specification defines this as a 'web database', which is a complete (although light) database in the browser.
So what happens when a synchronously executing jQuery script invokes an ajax function? The JavaScript interpreter hands the request over to the Networking engine to execute the HTTP GET request asynchronously, meaning the HTTP GET request executes while the JavaScript interpreter finishes processing its script. After the hand off to the Networking engine, the jQuery Script doesn't wait for a result to return. It continues processing synchronously, one line of code at a time, until it finishes the script. In this case, the analysis revealed that the form's submit handler was executing and writing the data to the database before the ajax function returned its result. It is all a matter of timing.
The Solution
The key to solving this timing issue is to prevent the form.submit() from firing until the networking engine has completed executing the HTTP GET request initiated by the ajax function. To do this we changed the trigger event from $(document).on('submit') to $("#btnSubmit").on( "click"). In the attached function, we immediately invoke e.preventDefault(), which stops the form.submit() from firing. We also needed to create a couple of callback functions for the done() and always() methods of the ajax object. The following code is a brief representation of the solution. We hope it helps with your own ajax related issues.
Author's note: Turning off the default behavior of a Formidable Pro submit button means that the form's validation will not fire. As a result, you may have to write your own validation routines.
Use Google Fonts Locally
Since the introduction of CSS3, web fonts have become ubiquitous. Instead of depending on a handful of standard system fonts that are loaded on a userâs computer, as a web designer or developer, you can choose from thousands of fonts that are hosted on remote servers and loaded into a userâs web browser. Google is one of the leading providers of web fonts. They have hundreds of free fonts available for your use through https://www.google.com/fonts. Best of all, they are all open source. Here's what Google says:
All of the fonts are Open Source. This means that you are free to share your favorites with friends and colleagues. You can even customize them for your own use, or collaborate with the original designer to improve them. And you can use them in every way you want, privately or commerciallyâin print, on your computer, or in your websites.
How Web Fonts Work
The Advantages
Web fonts offer both advantages and disadvantages for your website. Web fonts are downloaded to the user's browser while rendering the webpage and are then applied to the text. A big advantage of web fonts is that companies can use fonts that integrate with their brand image to achieve a consistent look and feel across all media. Web fonts can also introduce "personality" to your website, especially in headlines and subheads. The font displays on your website even when viewed on smartphones or tablets. Another modern benefit of web fonts is that you can eliminate jpg image headlines as was necessary in old-school development. With web fonts, all words on a page are 100% searchable and index-able. You no longer need ALT tags for search engines to know what your text says. This makes your code cleaner and more manageable.
Some Disadvantages
The main disadvantage of using web fonts is slow or inconsistent performance. They may slow your site's load time because you are making calls to a remote server that is outside of your span of control. They can also produce Cache Validator errors when tested with Google PageSpeed or Expire Header errors with Yahoo YSlow, again because of cross-site access. The images below are from a site tested through GTMetrix.com
Another disadvantage is that there is limited support for CSS3 in older browsers, which is required to use web fonts. The later limitation can be remedied by using a font stack, similar to the web safe font stacks, but including a web font as the first font of the stack. If a browser is unable to use the web font, it will fall back on the web safe fonts in the stack.
Overcoming the Disadvantages
Because of the Open Source nature of web fonts, they can be downloaded and served to the end user's browser directly from your website. There have been times where I have seen sites stall waiting for Google to respond. It may not be Google's fault either. It could be a DNS problem with your host or there could be a troublesome "hop" somewhere in the path required to reach Google. Whatever the case, serving Google fonts directly from you server will improve load times and avoid issues that come from downloading content from websites other than your own.
There are only a few steps required to serve Google fonts from your own site. In summary these steps include:
- Retrieve the Google Fonts CSS
- Download the Google Font(s)
- Upload the font to your server
- Add the font to your style sheet
The rest of this article will walk through the details of serving Google Fonts from your own local server.
Retrieve the Google Fonts CSS
-
Go to the Google Fonts website and add your chosen fonts to a collection.
-
Click the Use Button
-
Scroll down the page to the link to the Google Fonts CSS file.
-
Copy this link to a text editor
-
From the text editor, copy the content of the href tag and paste it into the browser address bar. Copy these @font-face styles to your text editor. We'll be editing these styles in the last step.
Download the Google Font(s)
The names of the Google Font files are in the @font-face styles you just copied to your text editor. For each font, copy the text that is in the URL() tag. For example, for the OpenSans-Light font in the above example, the name of the font file is:
fonts.gstatic.com/s/opensans/v13/DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2
Copy this to your browser address bar and the font will download. Unless you want to continue referring to the file as DXI1ORHCpsQm3Vp6mXoaTRampu5_7CjHW5spxoeN3Vs.woff2, I suggest you rename this when you download it to something more human readable. I generally rename the font file one of the local reference names in the style. In this case, I would rename this file to opensans-light.woff2.
Author's Note: To download all of the web font variations at once (eot, ttf, svg, woff, woff2), visit https://google-webfonts-helper.herokuapp.com/fonts. The site even generates the CSS for you.
Upload the Font(s) to Your Server
Once you've downloaded all of the Google fonts to your computer, upload them through FTP to your child theme directory. I generally create a fonts directory in the child theme directory and copy the fonts to there.
Add the Font(s) to Your Style Sheet
Now it's time to edit the @font-face styles we copied to your text editor. Change the URL() tags to point to the files in your child theme fonts/directory. If you've done everything correctly, the new styles should like this:
Copy all of this @font-face text to your child theme's style sheet.
Make sure you remove any code from your functions.php that may be enqueuing Google fonts through php code.
Using Google Fonts on the Desktop
If you download the full Google Font package of your choice from the alternative source mentioned in the Author's Note above, it should include either a True Type (ttf) or Open Type (otf) font. You can then use your OS font installer to add the font to your desktop font collection.
genesis_sitemap_output Filter
One feature of the Genesis Framework is the ability to easily create an archive page. Create a new page, assign the Archive template to it, and you're done. When you add it to a menu, the archive page displays links to all pages, categories, authors, monthly archives, and your last 100 posts.
Archive pages are sometimes referred to as sitemaps, but please don't confuse this type of sitemap with the XML sitemap that you register with the search engines to help index your site. While both of these sitemaps help your SEO and indexing, they are distinct tools and output their data very differently.
As with all things, times they are a-changin', and the release of Genesis 2.2 changed a lot. For example, examine the old and new page_archive.php source codes displayed below. In the "Out with the Old" section, page_archive.php had all of the code within the template to generate the sitemap. You'll see the bulk of this code in the genesis_page_archive_content() function (highlighted).
In the "In with the New" section, you don't see the archive code at all. What you see is a new function called genesis_sitemap. It is this function that now drives the content of archive pages. This function is found in genesis/lib/functions/general.php. For your convenience, the source code may be viewed below. But notice something magical at line 40âthat's right, it's a filter! While it's beyond the scope of this article to fully explain filters, I will say that they make it easy to change how a function works.
Out with the Old
In Genesis versions earlier than the 2.2 release, the page_archive.php file contained:
You'll find tutorials all over the Internet about how to change this version of the page to customize your sitemap's output. For example, suppose you don't want the author archives to display, you would comment out lines 39 through 44 as I've done in the above example.
In with the New
Since the release of Genesis Version 2.2, the new page_archive.php contains:
Much simpler, isn't it? While the genesis_page_archive_content() function hasn't shown up on the deprecated list yet, its output content has essentially been replaced by genesis_sitemap() in Version 2.2. So the question becomes, "How do I remove the author section now?" Genesis_sitemap is a core function that should never be changed, but remember the filter? Let's jump ahead to the Filter Genesis Sitemap with genesis_sitemap_output section to learn how.
genesis_sitemap()
Filter Genesis Sitemap with genesis_sitemap_output
To remove the author content from the new page_archive.php, we need to add a new filter to the child theme's functions.php. I've chosen not to pass any parameters to my new function. In the genesis_sitemap function, the heading parameter is passed. In this new function, I've decided to determine the proper headings for the archive page by including the same code that is used on line 36 in the code above. I've also copied the content from genesis_sitemap into my new function. Here I can comment out the author archives (lines 12 through 15).
The are other ways you can use the genesis_sitemap_output filter as well. In the first example, you can modify the text that displays as headers. In the second example, you can replace the sitemap altogether with a WordPress function.
Example 1
Example 2
See? I told you it was magic.
Add Widget Areas to News Pro Theme
A user writes:
Is it possible for me to achieve the following with the News Pro theme?
- Add a Home Center widget area below the Home Left and Home Right which would cover the whole length of the above two widgets combined
- Repeat the Home Left and Home Right widget just below the Home Center widget
Yes, not only is it possible, this is the same process to follow for any Studio Press theme.
First you need to register the widget areas. Add this to functions.php:
genesis_register_sidebar( array( 'id' => 'home-center', 'name' => __( 'Home - center', 'news' ), 'description' => __( 'This is the center section of the homepage.', 'news' ), ) ); genesis_register_sidebar( array( 'id' => 'home-middle-left-2', 'name' => __( 'Home - Middle Left 2', 'news' ), 'description' => __( 'This is the second middle left section of the homepage.', 'news' ), ) ); genesis_register_sidebar( array( 'id' => 'home-middle-right-2', 'name' => __( 'Home - Middle Right 2', 'news' ), 'description' => __( 'This is the second middle right section of the homepage.', 'news' ), ) );
Next, you have to modify the home page. Open front-page.php and replace it with this code:
' ', ) ); } function news_homepage_widgets() { if ( is_active_sidebar( 'home-middle-left' ) || is_active_sidebar( 'home-middle-right' ) ) { echo ''; genesis_widget_area( 'home-middle-left', array( 'before' => ' ', ) ); genesis_widget_area( 'home-middle-right', array( 'before' => ' ', ) ); echo ''; } if ( is_active_sidebar( 'home-center' ) ) { genesis_widget_area( 'home-center', array( 'before' => ' ', ) ); } if ( is_active_sidebar( 'home-middle-left-2' ) || is_active_sidebar( 'home-middle-right-2' ) ) { echo ''; genesis_widget_area( 'home-middle-left-2', array( 'before' => ' ', ) ); genesis_widget_area( 'home-middle-right-2', array( 'before' => ' ', ) ); echo ''; } genesis_widget_area( 'home-bottom', array( 'before' => ' ', ) ); } genesis();
Last you have to apply the CSS.
Find the classes for the home page in style.css around line 1287 and replace them with this:
/* Home Page
--------------------------------------------- */
.home-top {
background-color: #f3f3f3;
border-bottom: 1px solid #e3e3e3;
clear: both;
padding: 20px 20px 0;
}
.home-top .featured-content .entry-title {
font-size: 30px;
}
.home-middle-left,
.home-middle-left-2 {
border-right: 1px solid #e3e3e3;
float: left;
padding: 20px 20px 0;
width: 50%;
}
.home-middle-right,
.home-middle-right-2 {
float: right;
padding: 20px 20px 0;
width: 50%;
}
.home-bottom,
.home-center {
border-top: 1px solid #e3e3e3;
clear: both;
padding: 20px 20px 0;
}
Pause HTML5 Video When Out of Viewport
The owners of Houseplan Works gave us the requirement of adding a HTML5 video of a swinging lightbulb to a section of the home page in the Genesis Parallax Pro theme. Adding the HTML5 video is no big deal. WordPress does provide the shortcode. However, in this case, I opted to natively display the video using the HTML5 <video> tag.
The Problem while Testing
The problem that arose is that when I was testing the site on Firefox, Chrome, and Safari all at the same time, the MacBook Pro's cooling fans would spin up, memory pressure increased substantially, and the machine would eventually reboot itself. This led me to believe that one or more of these browsers have a memory leak when playing HTML5 videos. I suspect it's probably Firefox, because the same behavior occurs even if the other browsers are not running. It happens a little more slowly, but it still happens.
The Challenge
The only time I really ever need the video to play is when a user scrolls to the section of the page where the video is located. I modified the Genesis Parallax Pro theme to include seven panels with âsnap-toâ functionality. The theme as supplied has five panels without the snap-to feature. The challenge then is how do I play the video only when it is visible in the viewport?
The Response
The answer is a lot easier than I initially thought. The first part is to download the jQuery isInViewport plugin, install it in your child theme's directory structure, enqueue it in your theme's functions.php file, and finally, initialize it:
wp_enqueue_script( 'isInViewport', get_bloginfo( 'stylesheet_directory' ) . '/js/isInViewport.js', array( 'jquery' ), CHILD_THEME_VERSION );
Next, initialize the plugin.
jQuery(document).ready(function ($) {
"use strict";
/* activate pause for lightbulb video if scrolled out of viewport */
$(window).scroll(function() {
$('video').each(function(){
if ($(this).is(":in-viewport( 400 )")) {
$(this)[0].play();
} else {
$(this)[0].pause();
}
});
});
});
Well, that's it! I told you it would be easy.