Scripts and Tips

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

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-5a2e0510ec5cc144279284/]
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-5a2e0510ed6e0392894967/] Then, spit out the actual pagination: [crayon-5a2e0510ed6e7526379917/]  
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-5a2e0510edc77821471114/] If you want to print all the taxonomies for a particular custom post: [crayon-5a2e0510edc80906174911/] 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-5a2e0510ee1f1835116120/]  
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-5a2e0510f003b285990684/] (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-5a2e0510f07c2829697297/] 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-5a2e0510f07f2827654463/] Here's the HTML that adds the next and prev links, along with the slider itself: [crayon-5a2e0510f07f6708414205/]  
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.