Scripts and Tips

The Studio Simpatico development team’s collection of tips and tricks for front-end and WordPress developers.

Scripts and Tips /

How does WPEngine’s legacy staging environment work?

We couldn't be more excited to share another post to rave about another one of WPengine's beloved features. (In case you missed it: Why we recommend WPengine) This time, we're here to talk about how the Legacy Staging feature and functionality work. First things first: Every hosted, functional version of WordPress consists of both the code (which includes the theme code, as well as WP core, plugins, etc.) and the database. Generally speaking, theme code controls how page templates and objects are organized whereas the database is where content lives (though that gets murky the more styling is thrown into the back-end of WP/the database). Out of the box, you have a production site that includes the production code base that is tied to your production database. But if you're building and testing things -- content, installing plugins, pushing new code -- you're going to want a testing ground. Enter: WPengine's amazing functionality that offers us the ability to whip up a staging site with the click of a button. It can be found in your production site's admin.     When that teal button is clicked, both are cloned: When the staging environment is done, the URL for that environment can be found inside your WPadmin dashboard (see the screenshot above). If you want to access your admin login to the staging environment, you simply go to stagingurl/wp-admin. (Because remember -- there's an entirely separate admin to your staging site that has no relationship with your production environment.) Typically at Simpatico when we're working on WordPress web development projects, because we work on custom themes only, we're typically only making code updates. Consequently, when we push code changes that we're testing out on staging (which is often pushed to the staging server from our repository on Github or Beanstalk) -- we can do so without disrupting any production data. Translation? We can push code we've been working on without disrupting blog posts that were created moments ago. Questions, or even better, other workflows that you've tested/tried/love? We'd love to hear from you! Drop us a line at hello@studiosimpati.co.
Scripts and Tips /

I’m getting the “This page can’t load Google Maps correctly” error on the back-end using the ACF Google Maps field. How do I fix?

Everything was working great up until a few months ago, and suddenly stopped. What gives? 1. Make sure you have your API key loaded inside your functions file (this is the code for ACF Pro): [crayon-5c6f5881c7d50410398017/] 2. Make sure your API key is set up with a credit card. 3. (This is the one that eluded me for several hours.) You're going to want to enable "Places API for Web" -- otherwise, the dropdown won't work. You can activate that inside your Google Cloud Platform Console (https://console.cloud.google.com/google/maps-apis/overview?), inside the settings for whichever API you want to use (you can choose inside the dropdown):
Scripts and Tips /

How do I create pages with different margins in Microsoft Word?

[spacer top="28px"][/spacer] [lead]As designers, we would never think of actually “designing” anything in Microsoft Word — that’s what InDesign is for! Yet certain assets like presentation templates and letterheads need to be easily editable by our clients and we cannot expect them to be familiar with tools that we may use every day.[/lead] For such projects, I personally prefer starting with tools that I know will grant me creative freedom and ease of use, despite knowing that the final design will ultimately need to be recreated in Microsoft Word. We’ve already written about how the tools we use can affect the quality and style of our work, so I like to ensure that nothing is compromised based on medium. [row padding="14px 0 0 0"]
Want to skip my yapping and jump to the solution?

[button text="View Solution" link="#solution" target="_self" align="center"][/button]

[/row]
The Problem
We recently created a letterhead which featured a different header and margins on the first page. After design approval, our task was to create a single-page Word template that would automatically apply the correct styling if the content exceeded one page. Now, I’m not throwing shade at Microsoft Word — it is a powerful word processor. The issue is that certain use cases that may be common in a design project are unaccounted for or unintuitive at best. Word uses section breaks to apply different page layouts to different parts of a document, but section breaks can be a nightmare to use properly off the bat. See kids, what they don’t teach you at school is that a section break defines the style for the content preceding it. What? Yes, that is right. So if you delete a section, the content up to that section will adopt styling from the section after the now departed section break. [spacer top="28px"][/spacer] Me: “Great, I finally have that figured out. So I’ll just add a section break at the end of page one and everything will be fine, right?” Life: “NOPE!” The real problem is that there is no way to lock a section break. So even if I created a document with a blank second page and sections properly defined, the section break will be pushed down the page as the end user begins to type. Therefore, instead of your section starting after the end of the first page, it will always start after the end of the content. No bueno.  
The Solution
After searching all corners of the internet and reaching a state of pure delirium, I came across this guide, written by Ms. Suzanne S. Barnhill, I believe around… a decade ago. I owe this lady my sanity. It’s fairly straightforward in Word to create a different header and footer for the first page of a document — that they decided to make a toggle. Locking section breaks? Not so much. Luckily, only the top and bottom margins were different on the first page in my design. Following the guide, I first created the header and footer for the rest of the document, not the first page. Then, toggling the different first page toggle, I created the header for the first page. [spacer top="28px"][/spacer] This is where the magic happens. I ended up using the height of the first page header without having to get into using sections at all! If your header is live text, you can add line breaks until you reach the desired height — hacky, I know. If it’s in an image, you can add a bottom margin to your image using the Size and Position dialog for that image — still hacky, but less so. In the end, I finally had a document that starts as a single page with the correct first page header, and automatically applies the regular header to all pages subsequent pages if the content exceeds the first page.
Parting Words of Advice
If you find yourself in a similar, albeit very specific pickle, then I hope this guide saves you like Suzanne’s saved me. But the greater moral of this story of survival is that I’m glad I didn’t create a design based on the ease of its reproducibility in Word. The time and effort spent on recreating and getting the functionality right was, and is always worth knowing that the final product addresses the client’s needs, and is one that we are proud of.
Scripts and Tips /

How do I add a paginated wp_query to a custom post?

Recently I stumbled upon the following use case: On my single-authors.php page (the detail page for an author), I wanted to showcase all the posts written by that author. (Note I created a custom post for author rather than using WordPress users since none of the authors log in to WordPress.) To achieve this, I added the following to my functions.php: [crayon-5c6f5881c903e979019713/]  
Scripts and Tips /

How do I style radio buttons and checkboxes using FontAwesome?

As we all know, HTML and CSS give us nothing in the way of prettifying our checkbox and radio button inputs. Enter this handy CSS tip to create styled, purdy inputs: Hide the actual checkbox, and then add your FontAwesome character to the ::before selector of the label immediately in front of the input, using the ":checked" selector of the input to detect on/off and changing the character accordingly. [crayon-5c6f5881c965b365703145/]
Scripts and Tips /

How do I create pagination using WP_Query on a page?

When you need pagination on a page (rather than an archive), you may want to introduce pagination. Incorporate it into your query by detecting the page and modifying your query accordingly: [crayon-5c6f5881ca429084724240/] Then, spit out the actual pagination: [crayon-5c6f5881ca431519202655/]  
Scripts and Tips /

What are the code snippets I need to know to use taxonomies in my WordPress project?

If you want to access the taxonomy items on a particular post: [crayon-5c6f5881cab51410014608/] If you want to print all the taxonomies for a particular custom post: [crayon-5c6f5881cab57499931817/] Perhaps you want to change the order in which a custom taxonomy spits out its elements? This plugin will do in a pinch. Install it, and you’ll get a new item in your left nav: TERM ORDER. Inside the nav items, you can choose which taxonomy you want to reorder. Just make sure you select the radio button at the bottom of the page to have the sort be your new order.
Scripts and Tips /

How do I make a form on my WordPress front-end that creates a post on the WordPress back-end?

A recent project included the requirement to allow users of the site to be able to submit a form that populated a custom post on the WordPress back-end. While there are several plugins that enable you to do this, there's an even simpler way if you're a user of Advanced Custom Fields Pro: the acf_form() function. Check out how we've used it below: [crayon-5c6f5881cb25a527714146/]  
Scripts and Tips /

How do I animate a plus into an X?

Very simple CSS rotation. .dropdown-container a.dropdown-button span::after { -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; } .dropdown-container.active a.dropdown-button span::after { -webkit-transform: rotate(46deg); -moz-transform: rotate(46deg); -o-transform: rotate(46deg); -ms-transform: rotate(46deg); transform: rotate(46deg); }
Scripts and Tips /

How can I make an overlay scroll more gracefully on an iOS device? (a/k/a “momentum” based scrolling)

For awhile I've been noticing that when I implement scrollable fixed or absolutely positioned elements on top of everything, the feel is just a little "off" on mobile. I'm used to that swipe/wait/scroll, as opposed to swiping ... and the scroll immediately stops when I do. I haven't a clue why this behavior wouldn't be the default, but give this a try: [crayon-5c6f5881ccc02942370100/] (And make sure the overflow is scroll and not auto. Just ... 'cause ... that's the way it works.)
Scripts and Tips /

Within bxSlider, how do I change the prev and next links to be the prev and next slides?

A recent design called for bxSlider, but also for the 'next' and 'prev' links to include the titles of the next and prev slides. How to achieve this? I use Advanced Custom Fields PRO to populate an array of all the slide titles: [crayon-5c6f5881cd34f579916669/] Then, within the document ready function, I add this Javascript. The "filllinktext" function swaps out the prev and next links with the previous and next slides' titles, and that function is called every time the next and prev links are called: [crayon-5c6f5881cd355314905769/] Here's the HTML that adds the next and prev links, along with the slider itself: [crayon-5c6f5881cd357198398216/]  
Scripts and Tips /

How do I write code for the ACF repeater field or the image field?

Oh, the number of times I've copied and pasted these code snippets ... The repeater field: <?php if( have_rows('repeater_field_name') ): while ( have_rows('repeater_field_name') ) : the_row(); the_sub_field('sub_field_name'); endwhile; else : endif; ?> Image field: <?php $image = get_field('image'); if( !empty($image) ): ?> <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /> <?php endif; ?> <?php $image = get_field('image'); if( !empty($image) ): $title = $image['title']; $alt = $image['alt']; $caption = $image['caption']; $size = 'thumbnail'; $thumb = $image['sizes'][ $size ]; $width = $image['sizes'][ $size . '-width' ]; $height = $image['sizes'][ $size . '-height' ]; ?> <img src="<?php echo $thumb; ?>" alt="<?php echo $alt; ?>" width="<?php echo $width; ?>" height="<?php echo $height; ?>" /> <?php endif; ?>
Scripts and Tips /

How do I translate tracking into letter-spacing?

Pixel perfection is something many front-end developers advertise on their marketing websites, and unfortunately few live up to the claim. The devil's in the details when it comes to translating Adobe files to CSS -- and the fact that the two use entirely different measurement building blocks only makes matters more confusing. For precise instructions about how translate tracking in Illustrator into CSS letter-spacing, check out this helpful article.