jboullion, Author at JBoullion

Using TinyMCE outside of WordPress

Recently we had to setup a TinyMCE WYSIWYG outside of WordPress so we couldn’t use the wp_editor function.

TinyMCE has changed a lot since I last used it as a stand alone feature so I wanted to make a post about how to set this up so I don’t have to look around for this info again.

Step number one is setting up the script, like so

<script src='https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=API_KEY'></script>

1	<script src='https://cloud.tinymce.com/stable/tinymce.min.js?apiKey=API_KEY'></script>

Unfortunately you do need to setup an account and get an API key in order to correctly use TinyMCE. You also need to setup the domains you want this script to work on, this is done in your TinyMCE account.

Once we have that in place we can setup our WYSIWYG!

<form>
    <textarea id="mytextarea" name="mytextarea"></textarea>
</form>

<script>
    tinymce.init({
        selector: '#mytextarea',
        browser_spellcheck: true,
        height: "300",
        setup: function (editor) {
            editor.on('change', function () {
                editor.save();
            })
        }
    });
</script>

<form>

</form>

tinymce.init({

selector: '#mytextarea',

browser_spellcheck: true,

height: "300",

setup: function (editor) {

editor.on('change', function () {

editor.save();

})

}

});

</script>

And there we go! That is all you need to get a basic TinyMCE instance going.

NOTE: I had to make sure I had the editor.on(‘change’) function working or else my textarea wasn’t updating quite right. You might not need this for your use case.

TinyMCE also offers additional plugins which are really neat, unfortunately they require paying a monthly subscription 🙁

If you are using TinyMCE in multiple places and NEED those plugins, it would definitely be worth it, but the default functionality is probably good enough for most users.

Get Vimeo Thumbnail

Vimeo updated their API to version 3. In the process they have not only deprecated their previous, simple, API. They have also created a giant unwieldy monster that is unusable by 90% of developers in 90% of cases.

Sure, if you want to build an application around the use of vimeo for hosting your videos, this new API may be worthwhile.

But if you are like 99% of people who just want to display a thumbnail of a video hosted on Vimeo, you are **** out of luck. You need to setup library, and run through a bunch of oAuth bullshit. Dashron over on stack overflow seems to be the lead developer for this API and I am sure he had his reasons. I just can’t fathom what they could be.

ANYWAY, angry rant aside I found a workaround for this on Brian Coords website. The following code is his, but I needed to save it here for my future use since there is no way I will ever setup an entire library in a project just to get a thumbnail.

/**
 * Grab the url of a publicly embeddable video hosted on vimeo
 * @param  str $video_url The "embed" url of a video
 * @return str            The url of the thumbnail, or false if there's an error
 * 
 * @link https://www.briancoords.com/tech/get-thumbnail-vimeo-api/
 */
function grab_vimeo_thumbnail($vimeo_url){
    if( !$vimeo_url ) return false;
    $data = json_decode( file_get_contents( 'http://vimeo.com/api/oembed.json?url=' . $vimeo_url ) );
    if( !$data ) return false;
    return $data->thumbnail_url;
}

/**

* Grab the url of a publicly embeddable video hosted on vimeo

* @param str $video_url The "embed" url of a video

* @return str The url of the thumbnail, or false if there's an error

* @link https://www.briancoords.com/tech/get-thumbnail-vimeo-api/

function grab_vimeo_thumbnail($vimeo_url){

if( !$vimeo_url ) return false;

$data = json_decode( file_get_contents( 'http://vimeo.com/api/oembed.json?url=' . $vimeo_url ) );

if( !$data ) return false;

return $data->thumbnail_url;

}

Now to use this function you simple have to pass it the embed URL of your video, like this.

$vimeo_thumbnail = grab_vimeo_thumbnail('https://player.vimeo.com/video/'.$item['vimeo_id']);

<img src="'.$vimeo_thumbnail.'" />

$vimeo_thumbnail = grab_vimeo_thumbnail('https://player.vimeo.com/video/'.$item['vimeo_id']);

This should return the URL of your thumbnail which you can stick directly into your image src.

Thanks Brian!

Basic Breadcrumbs

Recently we made a site that needed breadcrumbs but was used as an internal portal. This means it didn’t need any SEO stuff so the standard Yoast breadcrumbs we use seemed like overkill.

Decided to create a couple simple functions to display our breadcrumbs.

/**
 * Get an array of all this posts ancestors
 * 
 * @param object $post The post you would like to get the ancestors of
 * @param bool $home Would you like to get the home page as well?
 */
function jb_get_ancestors($post = '', $home = false ){
	if(empty($post)){
		global $post;
	}
	
	//get our current post and current parent
	$current_post = $post;
	$post_parent = $post->post_parent;

	//Collect all our crumbs
	$crumbs = array($post);

	//just in case we try to break things with an infinite loop, lets stop ourselves
	$safety = 10;

	while($post_parent > 0 && $safety > 0){
		//get this parent post
		$current_post = get_post($current_post->post_parent);
		
		//update our current parent
		$post_parent = $current_post->post_parent;
		
		//add this new parent to the front of the array. Might be more efficient to just build the array and reverse?
		array_unshift($crumbs, $current_post);

		$safety--;
	}

	//if they want the home page as well stick that at the front of the array
	if($home){
		array_unshift($crumbs, get_post(1));
	}

	return $crumbs;
}

/**

* Get an array of all this posts ancestors

* @param object $post The post you would like to get the ancestors of

* @param bool $home Would you like to get the home page as well?

function jb_get_ancestors($post = '', $home = false ){

if(empty($post)){

global $post;

}

//get our current post and current parent

$current_post = $post;

$post_parent = $post->post_parent;

//Collect all our crumbs

$crumbs = array($post);

//just in case we try to break things with an infinite loop, lets stop ourselves

$safety = 10;

while($post_parent > 0 && $safety > 0){

//get this parent post

$current_post = get_post($current_post->post_parent);

//update our current parent

$post_parent = $current_post->post_parent;

//add this new parent to the front of the array. Might be more efficient to just build the array and reverse?

array_unshift($crumbs, $current_post);

$safety--;

}

//if they want the home page as well stick that at the front of the array

if($home){

array_unshift($crumbs, get_post(1));

}

return $crumbs;

}

/**
 * Create a trail of breadcrumbs
 * 
 * @param string $sep The element you would like to use to separate your crumbs
 * @param bool $home Would you like display the homepage?
 * @param bool $echo Would you like to echo this immidiately?
 */
function jb_breadcrumbs($sep = '&rsaquo;', $home = false, $echo = true) {
	//add spaces around our separator
	$sep = ' '.$sep.' ';

	//Collect all our crumbs
	$crumbs = pk_get_ancestors('', $home);

	//build the crumb string
	$crumb_string = '<div class="breadcrumbs">';
	foreach($crumbs as $ckey => $crumb){
		//if($crumb->ID === 0) continue;
		$crumb_string .= '<a href="'.get_the_permalink($crumb->ID).'">'.$crumb->post_title.'</a>'.($ckey < count($crumbs) - 1?$sep:'');
	}
	$crumb_string .= '</div>';

	//how does the user want this returned?
	if($echo){
		echo $crumb_string;
	}else{
		return $crumb_string;
	}

}

/**

* Create a trail of breadcrumbs

* @param string $sep The element you would like to use to separate your crumbs

* @param bool $home Would you like display the homepage?

* @param bool $echo Would you like to echo this immidiately?

function jb_breadcrumbs($sep = '&rsaquo;', $home = false, $echo = true) {

//add spaces around our separator

$sep = ' '.$sep.' ';

//Collect all our crumbs

$crumbs = pk_get_ancestors('', $home);

//build the crumb string

$crumb_string = '<div class="breadcrumbs">';

foreach($crumbs as $ckey => $crumb){

//if($crumb->ID === 0) continue;

$crumb_string .= '<a href="'.get_the_permalink($crumb->ID).'">'.$crumb->post_title.'</a>'.($ckey < count($crumbs) - 1?$sep:'');

}

$crumb_string .= '</div>';

//how does the user want this returned?

if($echo){

echo $crumb_string;

}else{

return $crumb_string;

}

By sticking those two functions in your functions.php file and then calling jb_breadcrumbs() wherever you want to display these breadcrumbs you should be all set.

ACF Convert Old PHP fields to JSON

Back in the day, if you wanted to make sure you could keep your environments in sync (and you couldn’t just be moving the database around) you had to use PHP to build and update your ACF forms. It was gross.

Nowadays you can just work with the ACF fields in the admin like normal and ACF will AUTOMAGICALLY build a json form you can use to sync your different environments.

You do need to set this up a little bit, so stick this in your functions.php file to get started.

//Pick a place for your jsons to live. We stick them into the /theme/includes/acf-json folder, but you can stick these wherever

// change where acf json files are saved
add_filter('acf/settings/save_json', 'pk_acf_save_json');
function pk_acf_save_json($path) { return get_stylesheet_directory().'/includes/acf-json'; }

// add our custom folder to places acf json are loaded from
add_filter('acf/settings/load_json', 'pk_acf_load_json');
function pk_acf_load_json($paths) { return array_merge($paths, array(get_stylesheet_directory().'/includes/acf-json')); }

//Pick a place for your jsons to live. We stick them into the /theme/includes/acf-json folder, but you can stick these wherever

// change where acf json files are saved

add_filter('acf/settings/save_json', 'pk_acf_save_json');

function pk_acf_save_json($path) { return get_stylesheet_directory().'/includes/acf-json'; }

// add our custom folder to places acf json are loaded from

add_filter('acf/settings/load_json', 'pk_acf_load_json');

function pk_acf_load_json($paths) { return array_merge($paths, array(get_stylesheet_directory().'/includes/acf-json')); }

Now the tricker part is going to be converting your old PHP.

I just setup a script like the one below and ran it once. This script is taken from David Egan’s site.

//this file is in the root of the site. Since this is only run once we can even delete this file immediately after we run it
define('WP_USE_THEMES', false);
require_once('wp-load.php');

$groups = acf_get_local_field_groups();
$json = [];

foreach ($groups as $group) {
    // Fetch the fields for the given group key
    $fields = acf_get_local_fields($group['key']);

    // Remove unecessary key value pair with key "ID"
    unset($group['ID']);

    // Add the fields as an array to the group
    $group['fields'] = $fields;

    // Add this group to the main array
    $json[] = $group;
}

$json = json_encode($json, JSON_PRETTY_PRINT);
// Optional - echo the JSON data to the page
echo $json;

// Write output to file for easy import into ACF.
// The file must be writable by the server process. In this case, the file is located in
// the current theme directory.
$file = get_template_directory() . '/acf-import.json';
file_put_contents($file, $json );

//this file is in the root of the site. Since this is only run once we can even delete this file immediately after we run it

define('WP_USE_THEMES', false);

require_once('wp-load.php');

$groups = acf_get_local_field_groups();

$json = [];

foreach ($groups as $group) {

// Fetch the fields for the given group key

$fields = acf_get_local_fields($group['key']);

// Remove unecessary key value pair with key "ID"

unset($group['ID']);

// Add the fields as an array to the group

$group['fields'] = $fields;

// Add this group to the main array

$json[] = $group;

}

$json = json_encode($json, JSON_PRETTY_PRINT);

// Optional - echo the JSON data to the page

echo $json;

// Write output to file for easy import into ACF.

// The file must be writable by the server process. In this case, the file is located in

// the current theme directory.

$file = get_template_directory() . '/acf-import.json';

file_put_contents($file, $json );

All you need to do now is copy the output from this script into it’s own file (or you could just have PHP write that file for you) and save it as a .json.

IMPORTANT NOTE: At this point this json file probably wont work. I had to go through the file and double quote all of the keys and fix up some other formatting issues. This was 99% completed by just doing a single find and replace in Visual Studio Code. Regex: “\s\w+:” This should find MOST of your keys and correctly format them so ACF can import them. This wont work PERFECTLY so you will need to scan your file to make sure everything is formatted right, but it will get you 99% of the way there.

Good Luck!

Show Post Date Instead of Freshness

BBPress shows the “Freshness” of a post by default. This is fine and will work for most people, but some clients want to show the actual date of a forum post.

Here is the code for that.

/**
 * Change the BBPress freshness to an actual date format
 */
add_filter( 'bbp_get_forum_freshness_link', 'jb_change_time_format', 10, 2 );
add_filter( 'bbp_get_topic_freshness_link', 'jb_change_time_format', 10, 2 );
function pk_change_time_format( $anchor, $forum_id ){
	$last_active = get_post_meta( $forum_id, '_bbp_last_active_time', true );
	
	if ( empty( $last_active ) ) {
		$reply_id = bbp_get_forum_last_reply_id( $forum_id );

		if ( !empty( $reply_id ) ) {
			$last_active = get_post_field( 'post_date', $reply_id );
		} else {
			$topic_id = bbp_get_forum_last_topic_id( $forum_id );

			if ( !empty( $topic_id ) ) {
				$last_active = bbp_get_topic_last_active_time( $topic_id );
			}
		}
	}

	$last_active = date('F j, Y', strtotime($last_active));

	$time_since = bbp_get_forum_last_active_time( $forum_id );

	return str_replace( "$time_since</a>", "$last_active</a>", $anchor );
}

/**

* Change the BBPress freshness to an actual date format

add_filter( 'bbp_get_forum_freshness_link', 'jb_change_time_format', 10, 2 );

add_filter( 'bbp_get_topic_freshness_link', 'jb_change_time_format', 10, 2 );

function pk_change_time_format( $anchor, $forum_id ){

$last_active = get_post_meta( $forum_id, '_bbp_last_active_time', true );

if ( empty( $last_active ) ) {

$reply_id = bbp_get_forum_last_reply_id( $forum_id );

if ( !empty( $reply_id ) ) {

$last_active = get_post_field( 'post_date', $reply_id );

} else {

$topic_id = bbp_get_forum_last_topic_id( $forum_id );

if ( !empty( $topic_id ) ) {

$last_active = bbp_get_topic_last_active_time( $topic_id );

}

$last_active = date('F j, Y', strtotime($last_active));

$time_since = bbp_get_forum_last_active_time( $forum_id );

return str_replace( "$time_since</a>", "$last_active</a>", $anchor );

}

Thanks to user Robin who posted this function to the BBPress forums here: https://bbpress.org/forums/topic/freshness-date-format/

I modified it slightly since it wasn’t working quite right in my testing.

Scrape Facebook Open Graph Data

Just found a really neat resource for scraping the open graph data from a url.

libxml_use_internal_errors(true);
$doc = new DomDocument();
$doc->loadHTML(file_get_contents($url));
$xpath = new DOMXPath($doc);
$query = '//*/meta[starts-with(@property, \'og:\')]';
$metas = $xpath->query($query);
foreach ($metas as $meta) {
    $property = $meta->getAttribute('property');
    $content = $meta->getAttribute('content');
    echo '<h1>Meta '.$property.' <span>'.$content.'</span></h1>';
}

libxml_use_internal_errors(true);

$doc = new DomDocument();

$doc->loadHTML(file_get_contents($url));

$xpath = new DOMXPath($doc);

$query = '//*/meta[starts-with(@property, \'og:\')]';

$metas = $xpath->query($query);

foreach ($metas as $meta) {

$property = $meta->getAttribute('property');

$content = $meta->getAttribute('content');

echo '<h1>Meta '.$property.' <span>'.$content.'</span></h1>';

}

100% Credit to Toni Michel Caubet. Stack Overflow Answer.