Adding Images and Other Fields with Advance Custom Fields

Creating an administrative interface that allow users to update information is pretty useful. Doing this in WordPress can be done with a handy little plugin called Advanced Custom Fields.

ACF is very much like Custom Fields, which (in my experience) is a little known and an even littler used bit of functionality built right into WordPress.

Here’s what you need to get an image added at the most basic level.

<img src="<?php the_field('image'); ?>" alt="wp" >

the_field is required and the setup to get all ACF snippets. Within the quotes we have the field_name; which – in this case – is ‘ image ‘. ACF actually allows you to serve up an array, the image URL, or the image ID. You’ll need to choose which of these you’d like to have outputted. For clarity, I’m using the image URL, which is wrapped in HTML. That produces the output of an image with the alt tag of “WP”. Yum.

Customize WordPress Excerpts to Include Link & Text

If you’re building a WordPress site and want to customize the excerpt to include a link and personalized text, read on! The the_excerpt(); template tag will enable you to get the excerpt, providing that you’re attempting to do this from the site files.

Get you some

The excerpts are by default the first 55 words of your article, that is unless you’re using the excerpt field from the dashboard of the admin side of WordPress. Using that will override what I’m about to show you.

Doing what I’m about to show you will have excerpts autogenerated. You can add more than the excerpt if you’re hard-coding this way. For instance, the_title(); will bring you the title of the posts. If that interests you, you can learn more about how WordPress template tags work.

Let’s do this

Alright, you’ll first need to instruct your site on what to do with excerpts. For that, we’ll be getting into the functions.php file of your site. You’ll likely do that through the server – via FTP or, if you’re too cool for skool, cPanel.

<?php 
function new_excerpt_more ($more) {
global $post;
return '...<a href="'. get_permalink($post->ID) . '">Read on ☞</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

Let’s talk through it. The opening tag is only needed once on for your complete file. So, you are likely adding this to the bottom of your functions.php. And, in that case, you won’t need that <?php tag. If, in the off chance, this was the ONLY function or the STARTING function in your file — then you would need to be sure it’s included.

Otherwise, you can begin with the functions line.

In the first line, we’re declaring that this is a “function”. After which, we name the function; in this case new_excerpt_more. Then, we store that in the ($more) variable.

After you have that in the functions.php file and have saved it, you…

    1. Can see the changes in your excerpts already, or…
      You need to go set the template tag where you want the excerpts to show up.

Using the Excerpt Template Tag

This is step is pretty easy. Correction, this step CAN BE pretty easy. If you’re sure of where you want the excerpt to show up – the home page for instance – you might be in luck. However, finding the actual page, or more likely the page part that the CMS is grabbing to output your page’s final HTML, CSS, JS can be a bit of a chore.

However, it’s likely that you’re trying to use excerpt instead of the_content();. Now, you can’t just replace things willy-nilly, but you can likely find the_content(); in your index.php file. Or, what you may find there is a reference on where to find the page’s content. Depending on the theme you’re using, your site may handle this differently.

Ultimately, you’ll need to ensure that the_excerpt(); is somewhere to be found in your site’s code. Ω

Alternating Mobile-First Layout in Bootstrap 4

bootstrap

By using the order- prefix you can start with a stacked, mobile-first layout.. then at a larger screen size essentially push and pull the blocks of content using the order prefix.

https://getbootstrap.com/docs/4.0/layout/grid/

Bootstrap 3 allowed you to use push and pull prefixes, those classes are gone in the latest version of bootstrap. Now, you’ll need to use the .order- prefix to alternate the layout of our page content.

Here’s an example of how it works.

 <div class="container">
  <section class="row">
    	<div class="col-xs-12 col-md-6 order-md-2"><p>1st on small; right on larger screens</p></div>
    	<div class="col-xs-12 col-md-6 order-md-1"><p>bottom on small; left on large</p></div>
 </section>
</div>

 

Setting Up Google Analytics Event Tracking

google analytics

Ever visit the Goals or Events Reports in Google Analytics (GA) and wonder how those got there? Let’s talk through it with the quick demo of how to setup event tracking and goals in GA.

⇜ ⇺ ⇽ ✰ ➳ ➯ ➺ 

Event tracking is helpful in monitoring all sorts of event types.
These include:

  • Destination (did your users make it to a particular page?);
  • Dwell time (how many visitors really stayed on a page long enough to read it or to watch a video?);
  • And the most useful, click event (did they click that button?).

In this demo we’ll setup an onclick event to track and tie that in to a GA goal we setup.

The Markup

There are various attributes we can add to our event, these include (a) label, (b) category, (c) event, and (d) one other.

To initially send the information to GA, we’ll use the following setup:

<!-- Here is the raw language, this will be put it an href -->
onClick="ga(‘send’, ‘event’, ‘category’, ‘action’, ‘label’, value, {‘NonInteraction’: 1});"


<!-- Here's the code from above, but plugged into an href -->
<a href="www.example.com" onClick="ga('send', 'event', 'category', 'action', 'label');">


<!-- Here's something that is more or less ready to use -->
<a href="www.example.com" onClick="ga('send', 'buttonClick', 'specialOffer', 'requestCoupon', 'productA');">
<!-- end -->

Try It Out

With the link above on a page, for instance this one, we should now be able to get into GA and start to see the events being tracked.

TRACK IT

Each time this button is clicked we should see an account of it in the GA Real-Time Reports dashboard in the events area.

google analytics event tracking real-time dashboard test

real-time dashboard test

BUT! Perhaps, you want to do this using jQuery instead. Eh? Alright, let’s do that one too.

Track Click Events in GA Using jQuery

There are a couple of parts.

  1. Include an id or a class on your link(s)
  2. Include jQuery
  3. Send the information to GA

Here we go.

<!-- Draft up a link, or more than one if you like. --->
<a id="link" href="#">LINK</a>
<a id="button" href="#"><button>Button</button></a>
<a id="other-jazz" href="#">Other Jazz</a>


<!-- Be sure you've got jQuery piping through things --->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


<!-- Call and do all of that JS/JQ weirdness --->
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#link').click(function() {
 ga('send', 'event',  'onpage-click', 'linkClick', 'happened');
});
jQuery('#button').click(function() {
 ga('send', 'event',  'onpage-click', 'buttonClick', 'happened');
});
jQuery('#other-jazz').click(function() {
 ga('send', 'event',  'onpage-click', 'otherClick', 'happened');
});
});
</script>

How’s about a little demo? 

LINK

Other Jazz

 

Success!

analytics-w-jquery

This post presumes you’re using Universal Analytics. If you’re using a newer or an older version of GA, you’ll need to have the mark-up that goes along with it. GA is (as of 9/22.17) pushing users to Google Tag Manager. The latest tracking snippets provided by GA include a reference to Google Tag Manager.

Resources:

https://developers.google.com/analytics/devguides/collection/analyticsjs/events

—http://convergeconsulting.org/2014/03/05/event-tracking-in-google-analytics-using-jquery-in-6-steps/

That’s it. Ω

2017 Priorities for SEOs

So, the end of the year is approaching. We’ll soon be feasting fork over knife, then opening presents, then saying, “I can’t believe it’s Spring already” – you know the drill.

For now, we can take a minute to reflect on the year behind and the year ahead. And, if you like, let’s consider it through the lens of an SEO. What of importance has happened, and what is likely still to happen that impacts our worlds?

A pretty serious shift this year toward AI has happened. While that may have influence via personal assistants, it’s still a very green field. As far as 2017 is concerned, I believe these the areas SEOs need to focus on in the year ahead:

  1. Preparing for voice search
  2. Taking a continued look into local search results
  3. Rewiring page code to be screaming fast
  4. Marking sites up with schema

1. Get ready for Voice Search

  • What is voice search? Voice search is spoken search.
  • How is voice search unique? Voice search tends to be more question-based, a bit longer, and is in the rise.
  • How do you prepare? Make your content conversational. This really should have been on our minds and something we’re doing already.

According to ComScore 50% of searches in 2020 will come from voice search. 

With semantic search, Google’s algorithm forced us to begin being less focused on one keyword phrase and to consider a broader approach. Include synonyms, speak topically. Be useful.

Being useful has – arguably – been not simply a search manifestation, but a marketing manifestation. With millennials we have a generation larger or as large as any alive. One that also has – like the rest of us – found itself to be tired and untrusting of corporate advertising messages. Bored and ‘done’ with corporate-speak – this generation is looking for brands that can be helpful, human, and handy. I can’t stress that enough. Authentic, genuine, real. Time has come. … Make your content conversational. Write how you speak. It’ll pay dividends with voice search, and with millennials and anyone else looking for a real voice.

2. Continue to Optimize for Local SERP

Continue to look into local search engine results pages (SERP). Things continue to change there, and depending on your type of business this could be a pretty serious battleground.

There are a whole host of variables that play into ranking in local search engine results. Furthermore there are many great articles out there to provide timely insight as to how to optimize for local search engine results.

map-trial

Monitoring (and mobilizing on) these things in 2017, I believe, will continue to be a priority for SEOs.

3. Continue to Model a Mobile First-Mindset

Make your pages screaming fast (and optimized for all users). We’ve know for a while to put the mobile experience first. Google made their preference for a mobile-mindset through a variety of updates this year. 

  • The introduction of Accelerated Mobile Pages (aka AMP) is one of Google’s bigger directives for webmasters and SEOs in 2016. This project has only just begun. AMP opportunities continue to evolve, allowing more and more pages to be marked up with the mobile-first language.
  • In May of 2016, at their Performance Summit, Google announced many of the changes we came to see in 2016.
    • They got rid of right side rail ads admitting the value of them wasn’t future-oriented 
    • Changed their ad mobile layouts
    • Introduced new mobile ad features
    • Introduced new ad extensions
    • They even updated Google Analytics replacing traditional web metric language with mobile app terminology. 
  • They’ve been recommending that page speeds be a point of interest for a while now (to accommodate at large mobile users), even providing tools for webmasters and SEOs to get site and individual page download speed ratings. Advising site owners to use page speed tools info to deploy optimizations.
  • In 2017 they’ll be making their index mobile-first. There’s some debate as to what this will ultimately mean, but no doubt there’s no excuses not to have a mobile-first mindset. 

4. Elevate Your Schema Game

We’ve seen more and more happening directly in SERP, and will continue to do so.

At-large, schematic markup (which involves applying additional markup for Google to better understand and further showcase page content) is helping inform and colorize general search SERP as well as the aforementioned local SERP.

Instant answers, the knowledge graph, and rich snippets continue to push the envelope on what is bound to show up in text-driven SERP.

The most current recommendation from Google on schema is to use the JSON version. As of November 21, 2016 – restaurants now have their own rich cards.

SEOs need to be familiar with AMP and schema in 2017. No question about it. AMP and schema are being used together in some instances; and Google, in 2017, is set to make it’s index mobile-first. Getting very familiar with AMP, in its current and more than likely continuing to evolve states, is something SEOs should be doing now and into 2017.  

There you have it. We could throw in a note or two about optimizing and including images in your search + content creation plans. Strategize having relevant images to offer the world and search engines.

Too, we could touch on the (6 years in a row) declaration that video is set to explode; and discuss the value of such a rich media, but let’s end here.

We’ve got plenty to do with the main four notes above.

Keep in mind these trends are only directional anyway, each of those areas is likely to continue to grow, expand, and tighten in the next week, month, and quarter. Get ready. Take 2017 by the horns.  

If you’re an SEO, webmaster or marketer looking to dive into the particulars of some of the items shared above, here are some good resources to get you started.

Google’s recent blog post and introduction to resturant-specific rich cards: https://developers.google.com/search/docs/data-types/local-businesses#restaurant-lists

Google’s documentation and testing tools for developing schematic pages. https://search.google.com/structured-data/testing-tool/u/0/

A great AMP by example resource: https://ampbyexample.com/

An index of all things schema: http://schema.org/docs/gs.html