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. You can learn more about template tags if you’re into it.

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.

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

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.

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>