A Pocketful of Pro-tips

#wcyyc @tammalee
TAMMY VALGARDSON
@tammalee @kickpointinc
Development Director
Figure-outer of things
Code snippets in this talk are here:
https://gist.github.com/tammalee
I have attributed sources where I can!
But some sources are lost in the mists of time. Sorry.

#wcyyc @tammalee
Pocket Full of Pro-tips*
Tammy Valgardson
* A dry technical talk livened up by gnomes and rainbows!

#wcyyc @tammalee
The Big Picture

#wcyyc @tammalee
You, a developer, are
not alone, anymore.*
* Unless you're a freelancer. Sorry. You
might be alone. :(

#wcyyc @tammalee
Big Picture Considerations
UX/Design
● Component behaviour (animations,
transitions, responsiveness)
● Micro-copy (Those teeny messages
that frustrate users)
● Performance (How many fonts are
we loading? D:)
● Established web conventions
reminders
Digital Marketing
● URL structure
● URL STRUCTURE
● UUUURRRRLL… you get the picture
● Relevant markup
● Schema
● Little things like, 'external links must
open in a new tab'
● GTM/GA implementation
● Client goals and other things that are
good to know at the beginning of a build!

#wcyyc @tammalee
Big Picture Protips
How to save yourself time and hours down the road.
● Know the finished site structure and URLs
● Know what is going to be tracked with what
marketing tool
● Don't assume anything about the design & get the
final content early
● Make sure all utility pages have been touched on
(e.g. 404 page)

#wcyyc @tammalee
You are still the
expert when it comes
to building things!

#wcyyc @tammalee
Digital Marketing Stuff

#wcyyc @tammalee
Google Analytics
1. Use the wp_head action to insert the code snippet into your header
via the functions.php file
2. Copy and paste the code snippet directly into your header.php file
DO NOT Install a plugin JUST to insert GA code!
(I will talk so much smack about you if you do)
Gnarr!

#wcyyc @tammalee
Go one better, and install
Google Tag Manager
instead of just
Google Analytics

#wcyyc @tammalee
What is GTM? (Google Tag Manager)
GTM is is a free tool that makes it
easy for marketers to add and
update website tags -- including
conversion tracking, site analytics,
remarketing, and more—with just a
few clicks, and without needing to
edit your website code.
I like it because it means less people
need to touch the code!
Touch mah
code and I
cut U!
j/k

#wcyyc @tammalee
GTM Templates
Instead of starting from scratch every
time you create a GTM container for a new
site, create a template you can export and
import into the new container!
Click on your template container then go
to Admin. You’ll see Export Container and
Import Container links.

#wcyyc @tammalee
Installing Google Tag Manager
You'll be given two code snippets. One goes
between the <head></head> tags in your
header.php file and the other goes right after
the opening <body> tag in your header.php file.
Because the snippets are split, and WordPress
doesn’t have a native ‘after_body()’ hook, I
usually just edit my header.php file. Then I feel
dirty there wasn’t a better way. (A PLUGIN IS
NOT A BETTER WAY!)

#wcyyc @tammalee
www.simoahava.com

#wcyyc @tammalee
GTM - Welcome to the data layer
Most of the time, it's pretty straightforward to create
GTM tags. But when it comes to tracking form events,
things seem to fall apart. I blame AJAX.
Sometimes, to track a form or eCommerce interaction
properly you need to use the GTM data layer.
The data layer is a JavaScript array that needs to be on
your site, which is why a developer needs to be involved.

#wcyyc @tammalee
Data layer push using Mailchimp 4 WordPress
● Create a GTM variable called formId
● Create a GTM trigger
● Create a GTM tag
● Add data layer code on your site that will
send a variable called ‘formId’ to GTM
● Celebrate when you start seeing results!
Let’s break it down a bit further.

#wcyyc @tammalee
Create a GTM variable called formId

#wcyyc @tammalee
Create a GTM trigger

#wcyyc @tammalee
Create a GTM tag

#wcyyc @tammalee
GTM - Gravity Forms
Same steps as before,
but this time we are
using a PHP hook
instead of a JS one.
And what if you want
to pass over the value
of a drop down field?

#wcyyc @tammalee
GTM - Gravity Forms
In addition to the formId
variable, you’ll need to create
a variable for the new value
we’re passing.

#wcyyc @tammalee
GTM - Gravity Forms
My Trigger was the same as
last time, formId but now I
can use my new data layer
variable as a label in my tag!

#wcyyc @tammalee
ADVANCED CUSTOM FIELDS

#wcyyc @tammalee
ACF Local JSON
“Local JSON is a new feature added in version 5
which saves field group and field settings to files
within your theme. The idea is similar to caching
and both dramatically speeds up ACF and allows for
version control over your field settings!”
https://www.advancedcustomfields.com/resources/local-json/
Vroom vroom! Let’s speed up ACF!

#wcyyc @tammalee
ACF Local JSON
● Go to your theme folder
● Create a new folder called acf-json
● Go to the Custom Fields area of your WordPress
admin and save each of your custom fields to
generate JSON files
● Performance
Seriously, that’s all there is to it!
So, what did that do?

#wcyyc @tammalee
We went from this:
ACF Local JSON
To this (on a locally hosted site):
[Page generation time / Peak memory usage / DB query time / DB queries]

#wcyyc @tammalee
Query Monitor
“Query Monitor is a debugging plugin for anyone
developing with WordPress. It has some advanced features
not available in other debugging plugins, including
debugging of AJAX calls, REST API requests, redirects, and
the ability to narrow down its output by plugin or theme.”
https://en-ca.wordpress.org/plugins/query-monitor/
This plugin is great!
It’s how I test performance while developing.

#wcyyc @tammalee
acf_the_content()
WP has the_content() ACF has acf_the_content()
This little discovery made my entire year!

#wcyyc @tammalee
ACF and Template Partials
This is way too complicated to go into so links!
My pal Don does his this way:
https://gist.github.com/tammalee/f646fe3526a5711d1e1516400e351606
I do mine this way:
https://gist.github.com/tammalee/c287220405420de560475c9071c12b72

#wcyyc @tammalee
Must-Use Plugins
I use mu-plugins for:
Custom post types
A site class
First, what is a Must-use plugin and why do I use
them for custom post types and a site class?

#wcyyc @tammalee
Must-Use Plugins
“Must-use plugins (a.k.a. mu-plugins) are plugins
installed in a special directory inside the content folder
and which are automatically enabled on all sites in the
installation. Must-use plugins do not show in the
default list of plugins on the Plugins page of
wp-admin – although they do appear in a special
Must-Use section – and cannot be disabled except by
removing the plugin file from the must-use directory,
which is found in wp-content/mu-plugins by default.”

#wcyyc @tammalee
Must-Use Plugins
Certain functionality and data should be kept separate
from themes. Period.
E.g. A client has entered fifty products into their site but
then they decide they want to switch themes. If the
product custom post type is part of that initial theme,
they will ‘lose’ their products when they switch themes!
You could use a CPT plugin, and I have done this, but if a
CPT is integral to a site, I prefer a mu-plugin. Why?

#wcyyc @tammalee
Must-Use Plugins
“Always-on, no need to enable via admin and users
cannot disable by accident.
Can be enabled simply by uploading file to the
mu-plugins directory, without having to log-in.
Loaded by PHP, in alphabetical order, before normal
plugins, meaning API hooks added in an mu-plugin
apply to all other plugins even if they run
hooked-functions in the global namespace.”

#wcyyc @tammalee
Must-Use Plugins - CPT
/**
* @wordpress-plugin
* Plugin Name: Testimonials custom post type
* Plugin URI: [URL HERE]
* Description: Testimonials custom post type
* Version: 1.0.0
* Author: [AUTHOR HERE]
* Author URI: [AUTHOR URI HERE]
* License: GPL-2.0+
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
* Text Domain: [TEXT DOMAIN HERE
* Domain Path: /languages
*/

#wcyyc @tammalee
Must-Use Plugins - CPT
// If this file is called directly, die.
if (!defined('WPINC')) {
Die;
}
add_action('init', function () {
$args = [ARRAY OF ARGUMENTS HERE];
register_post_type('testimonials', $args);
}, 0);

#wcyyc @tammalee
MU-Plugin Site Class
● Why make a site class and what goes into it?
Functionality.
● remove_action/filter() I throw them here. I don’t want
them on the site regardless of the theme
● add_filter/action() Like enabling SVG upload/display
● add_shortcode() If I switch themes, I don’t want the main
shortcodes in my content to break! E.g. buttons
● Any other function that you want separate from
presentation. I also put Gravity Forms filters here, for
example and my ACF template partials function

#wcyyc @tammalee
Using the Customize API
Advanced Custom Fields
Customize API 1st load
Built-in Social menu in 2017 theme
CHECK THAT OUT! 9 queries vs. 13!

#wcyyc @tammalee
Favourite Templating Functions
get_theme_file_uri()
Instead of get_template_directory_uri()! If it can't find what you're
looking for in the child theme, it looks for the file in the parent theme!
get_template_part() - Even works inside /template-parts!
get_template_part( 'template-parts/content', 'page-header' )

#wcyyc @tammalee
Gist: https://gist.github.com/tammalee/e9ab6c9d040fcbd322a585f6f5c971f7
Strip P tag from IMG and IFRAME tags

#wcyyc @tammalee
Scripts/Styles only when you need them

#wcyyc @tammalee
Enqueueing Google Fonts
Easy peasy lemon— Don’t just put
this stuff in the header! >:(
Enqueue things!

#wcyyc @tammalee
Enqueueing Typekit

#wcyyc @tammalee
Removing version variable from styles and scripts

#wcyyc @tammalee
THANK YOU!
@tammalee
Development Director
@kickpointinc
www.kickpoint.ca
#stardewvalley
#slimeranchinglifestyle

A Pocketful of Pro-tips

Recommended

Recommended

More Related Content

What's hot

What's hot (12)

Similar to A Pocketful of Pro-tips

Similar to A Pocketful of Pro-tips (20)

Recently uploaded

Recently uploaded (20)

A Pocketful of Pro-tips