kevinwhoffman

<?php

function get_the_author_display_name() {
    return get_the_author_meta( 'display_name' );
}
add_shortcode( 'author', 'get_the_author_display_name' );

kevinwhoffman

Notes and Resources for Responsive Images in WordPress 4.4

Following the addition of responsive images support in WordPress 4.4, there has been a lot of confusion over what WordPress does "automatically" and what is left up to the developer. I've gathered the following notes from chatting with members of the core team and also my own investigation of the 4.4 source. Here's what I've discovered:

• Following the 4.4 update, WordPress automatically serves the following images responsively:

  • Content images added via the main content editor will now be served with srcset markup. This is accomplished by filtering the_content() prior to display, which means it applies to existing posts and new posts going forward.
  • Featured images called by the_post_thumbnail() also get srcset markup without any additional steps required.

• Images that are referenced from custom fields will not be served responsively unless the theme calls the image via wp_get_attachment_image() OR constructst the responsive m

kevinwhoffman

<?php

/**
 * In order for Google Maps Builder Pro to work with ACF map fields,
 * lat and lng are saved as separate fields in the function below.
*/

function acf_save_lat_lng( $post_id ) {

	// get value of ACF map field

kevinwhoffman

<?php

function acf_update_post_thumbnail( $post_id ) {
    $thumbnail_id = get_post_meta( $post_id, 'acf_image_field' );
    set_post_thumbnail( $post_id, $thumbnail_id );
}

// run after ACF saves the $_POST['acf'] data
add_action( 'acf/save_post', 'acf_update_post_thumbnail', 20 );

kevinwhoffman

<?php

  $labels = array(
    'name' => 'Regions',
    'label' => 'Regions'
  );
  $args = array(
    'labels' => $labels,
    'hierarchical' => true,
    'label' => 'Regions',

kevinwhoffman

<?php

/**
 * Given a URL like http://example.com/?id=1 this function will pre-populate a Gravity Form field called 'fname'.
 * For more info, see GF docs: https://www.gravityhelp.com/documentation/article/gform_field_value_parameter_name/
 */

add_filter( 'gform_field_value_fname', 'populate_fname' );
function populate_fname() {
  $id = $_GET['id'];

kevinwhoffman

Demystifying Responsive Images in WordPress

Whether you are an advanced WordPress theme developer or simply editing content from the dashboard, there is one question that everyone asks at one point or another:

What size should my images be?

This already complex question takes on a whole new dynamic with the recent addition of responsive images in WordPress 4.4. While the basic concept of responsive images may be easy to grasp, a true understanding of the inner workings is far more elusive. In this talk, we will demystify responsive images and learn how to strike a proper balance between image performance and image quality within any context.

Below is a brief overview of the main points we will touch upon throughout this talk:

kevinwhoffman

<?php
// Place in functions.php of Twenty Sixteen to see editor background take on color of customizer background.

/**
 * Build editor stylesheet from customizer settings upon customizer save.
 */
function kwh_build_stylesheet() {
  $upload_dir = wp_upload_dir();
  $stylesheet = $upload_dir['basedir'] . '/kwh-editor-style.css';
  $styles = '';

kevinwhoffman

<?php
/**
 * Adds styles from customizer to head of TinyMCE iframe.
 * These styles are added before all other TinyMCE stylesheets.
 * h/t Otto.
 */
function kwh_add_editor_style( $mceInit ) {
  // This example works with Twenty Sixteen.
  $background_color = get_theme_mod( 'background_color' );
  $styles = '.mce-content-body { background-color: #' . $background_color . '; }';

kevinwhoffman

function fsc_figure( $image, $size, $imageclass, $captionclass ){

	/**
	* Let plugins pre-filter the image meta to be able to fix inconsistencies in the stored data.
	*
	* @param string 		$image    			The ACF field name (i.e. 'your_photo_name').
	* @param string  		$size    				Thumbnail size (i.e. 'Thumbnail', 'Medium', 'Large')
	* @param string 		$imageclass     The Figure class you want to use (ex: 'my-figure') 
	* @param string    	$captionclass 	The Figcaption class you want to use (ex: 'caption-blue') 
	*/