oEmbed not working (I’m convinced it’s me)

One of the new WordPress 4.4 features is the ability for your installation to become an oEmbed provider. In plain English you can paste your post URL and get a result as if you were embedding a YouTube URL.

I could not get it to work for me. No way, no how. The json and XML discovery links were there in the post HTML but those links came back with “What? What? No. Go away, you’re bothering kid.”

It should have come back with a valid output and it did. It was a result, just not a functioning one.

For example, this post (which I’m not embedding) should provide via this link usable information. It doesn’t. I get this.

<link rel="alternate" type="application/json+oembed" href="https://blog.dembowski.net/wp-json/oembed/1.0/embed?url=https%3A%2F%2Fblog.dembowski.net%2F2015%2Fserver-admins-love-wp-cli%2F" />

That link results in this.

{"code":"rest_missing_callback_param","message":"Missing parameter(s): url","data":{"status":400,"params":["url"]}}

It doesn’t contain any useful data except to reply with “What? What? What?”

It should output this.

{"version":"1.0","provider_name":"Mostly Harmless","provider_url":"https:\/\/blog.dembowski.net","author_name":"Jan Dembowski","author_url":"https:\/\/blog.dembowski.net\/author\/jan\/","title":"Server admins love WP-CLI","type":"rich","width":600,"height":338,"html":"</pre>
<blockquote class="\&quot;wp-embedded-content\&quot;">
<a href="\&quot;https:\/\/blog.dembowski.net\/2015\/server-admins-love-wp-cli\/\&quot;">Server admins love WP-CLI<\/a><\/blockquote>\n<script type="text\/javascript">// <![CDATA[
\n<!--\/\/--><![CDATA[\/\/><!--\n\t\t!function(a,b){\"use strict\";function c(){if(!e){e=!0;var a,c,d,f,g=-1!==navigator.appVersion.indexOf(\"MSIE 10\"),h=!!navigator.userAgent.match(\/Trident.*rv:11\\.\/),i=b.querySelectorAll(\"iframe.wp-embedded-content\"),j=b.querySelectorAll(\"blockquote.wp-embedded-content\");for(c=0;c<j.length;c++)j.style.display=\"none\";for(c=0;c<i.length;c++)if(d=i,d.style.display=\"\",!d.getAttribute(\"data-secret\")){if(f=Math.random().toString(36).substr(2,10),d.src+=\"#?secret=\"+f,d.setAttribute(\"data-secret\",f),g||h)a=d.cloneNode(!0),a.removeAttribute(\"security\"),d.parentNode.replaceChild(a,d)}else;}}var d=!1,e=!1;if(b.querySelector)if(a.addEventListener)d=!0;if(a.wp=a.wp||{},!a.wp.receiveEmbedMessage)if(a.wp.receiveEmbedMessage=function(c){var d=c.data;if(d.secret||d.message||d.value)if(!\/[^a-zA-Z0-9]\/.test(d.secret)){var e,f,g,h,i,j=b.querySelectorAll('iframe[data-secret=\"'+d.secret+'\"]'),k=b.querySelectorAll('blockquote[data-secret=\"'+d.secret+'\"]');for(e=0;e<k.length;e++)k[e].style.display=\"none\";for(e=0;e<j.length;e++)if(f=j[e],c.source===f.contentWindow){if(f.style.display=\"\",\"height\"===d.message){if(g=parseInt(d.value,10),g>1e3)g=1e3;else if(200>~~g)g=200;f.height=g}if(\"link\"===d.message)if(h=b.createElement(\"a\"),i=b.createElement(\"a\"),h.href=f.getAttribute(\"src\"),i.href=d.value,i.host===h.host)if(b.activeElement===f)a.top.location.href=d.value}else;}},d)a.addEventListener(\"message\",a.wp.receiveEmbedMessage,!1),b.addEventListener(\"DOMContentLoaded\",c,!1),a.addEventListener(\"load\",c,!1)}(window,document);\n\/\/--><!]]>\n<\/script><iframe sandbox=\"allow-scripts\" security=\"restricted\" src=\"https:\/\/blog.dembowski.net\/2015\/server-admins-love-wp-cli\/embed\/\" width=\"600\" height=\"338\" title=\"Embedded WordPress Post\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\" class=\"wp-embedded-content\"><\/iframe>","thumbnail_url":"https:\/\/blog.dembowski.net\/wp-content\/uploads\/sites\/2\/2015\/12\/wp-cli-rocks.png","thumbnail_width":600,"thumbnail_height":135}

Which is unreadable to you and I but to something looking to oEmbed your post it will look like this.

Server admins love WP-CLI

Nice huh? All neat in an iframe and easily embeddable. The output is customizable too and I plan to do that on my photo blog.

The oEmbed discovery links should just work but on my installations it doesn’t. I tried Apache2, nginx, clean installation with zero plugins and the Twenty Fifteen theme. Different servers too. I always got the wrong output and could not get oEmbed working.

During my troubleshooting I found a different URL that worked consistently for me. It’s the same information but with a filter I replaced the default output with one that worked for me.

Here’s the plugin code I used. The oembed_discovery_links is filterable (filters are cool) and I toss out the old links and replace them with my own.

This works for me but I do not like this solution.

The problem I have is that the normal links are not being replied to correctly via my WordPress installation. I don’t know why the default discovery links are not working. It bothers me, it really does. 😉

I’m convinced that there is something I’m doing wrong in my setup. Once I figure it out I’ll I can remove this plugin and I’ll post what I was missing.

Server admins love WP-CLI

I’m more of a Network Monkey, but whenever I can provision something just using an ssh session I smile. Many hosts use WP-CLI already and I’ve installed it on my VPS too.

This morning I wrote up a small script to go to my test vhost directory and did the following.

  • Install a blank WordPress site
  • Update some settings
  • Fix my user display name
  • Make sure the plugins and themes are up to date (Akismet needed an update)
  • Delete the default post and page
  • Install, activate and configure the Wapuuvatar plugin
  • Install and activate the Baskerville theme
  • Imported the Theme Unit Test data
  • Cleaned up after the import
  • Used search and replace to make all my http URLs into https

All this was performed without using a mouse or web GUI. (Okay, I checked the avatar setting via /options.php, but I didn’t have to.)

Here’s the script with sensitive details changed.

#!/bin/bash
cd /my/notsecret/www/vhosts/bang.dn7.me

# Setup a new WordPress installation

wp core download

wp core config --dbname=tothemoon \
--dbuser=testuser \
--dbpass=3c962761afbf9ab40a2e75346809c8cf

wp core install --admin_user=jan \
--admin_password=Rea11y*ot7y^assWiRd \
--admin_email=example@example.com \
--url=bang.dn7.me \
--title="Bang! Boom! Pow!"

# Update some options and my account info

wp option update blogdescription \
"What could possibly go wrong?"
wp option update comment_moderation 1
wp option update comments_notify 0
wp option update moderation_notify 0
wp option update comment_whitelist 0
wp user update 1 --first_name="Jan" \
--last_name="Dembowski" \
--display_name="Jan Dembowski"

# Make sure plugins and themes are all up to date

wp plugin update --all
wp theme update --all

# Clean up the default post and page

wp post delete 1 --force
wp post delete 2 --force

# Wapuuvatar is cool. Install, activate
# and set to the default avatar

wp plugin install wapuuvatar --activate
wp option update avatar_default dwapuuvatar

# Let's play with the Baskerville theme

wp theme install baskerville --activate

# Now to import the theme unit test data

wp plugin install wordpress-importer --activate

curl -O https://wpcom-themes.svn.automattic.com/demo/theme-unit-test-data.xml

wp import theme-unit-test-data.xml --authors=create

# Clean up in aisle seven

wp plugin deactivate wordpress-importer
wp plugin delete wordpress-importer
rm theme-unit-test-data.xml

# My test site is also TLS so I'll fix 
# all the things to point to the encrypted URL

wp search-replace http://bang.dn7.me https://bang.dn7.me

# All done

I previously dropped the test installation’s database and created a new empty one. A quick “rm -rf *” (which wise people never do) in the right vhost directory and I ran “bash install-bang.sh”.

It works like a charm. Smart web hosts can and do tie WP-CLI into their provisioning setup. I happened to setup my vhost with TLS and mysql in advance but with a little backend work this can be easily automated.

If you have a test server to play with then give WP-CLI a try. You’ll get a better understanding of both WordPress and the command line.

I can’t really get angry at him for solving a problem

Friday afternoon I called the house and got my then 13 year old son. He turned 14 a few days later.

Dad, the WiFi sucks. I’m trying to download an update to War Thunder and it’s taking almost an hour.

He was right, the WiFi adapter on his PC is garbage. The access point is in the same room less than 10 feet away. There’s no reason for wireless to suck.

I told him that I’ll get an Ethernet cable and hardwire him into the FIOS router. That will give him all the bandwidth he could ever use. I didn’t think much about it after that till I got home.

He really wanted that update to War Thunder.

He gave it some thought and enabled tethering on his iPhone. Via WiFi he connected his PC to the iPhone and began to download the update. In less than 2 hours he ate almost 3 GB out of my monthly 10 GB allotment.

This did not make Lily and I very happy. She got a text message saying we’d crossed 75% of usage. She asked him and he suddenly remembered what he’d done and quietly disabled tethering without ‘fessing up. Lily pulled up a pie chart of the usage and his phone was right behind mine.

I got home and it took me 0.0035 seconds to figure out what he did. I was angry and let him know that he was being selfish. He should have told his mother what he’d done. And yet… I like how he figured out another way to connect to the Internet. He had a problem and quickly came up with an alternative to fix it.

He lost cellular data for the week and may lose it for the rest of December. I also deleted his games and YouTube app from his phone; enough already. But I’m glad he thinks to solve problems and I can’t be mad at him for that. Later on I told him I like that part of what he did.

If he does it again though, that phone is mine. 😉

Tomorrow the WordPress Community Summit!

Last year I was fortunate to be invited to the 2014 WordPress Community Summit and this year in Philadelphia I’m going again. Tomorrow morning Lily and I will wake up around 4 AM. She’ll drive me to the train station where I’ll take a 5 AM train to Penn Station. From there it’s an Amtrak ride to Philadelphia.

I’ll be a little late to the event. 😉 It can’t be avoided, I had too much going on at work to be there the night before. The 4 AM is rough on Lily but I’m often awake at that time waiting for 5:30 to get up. She’s much more sensible than I am and I wouldn’t be going but for her support and tolerating my hobbies.

I’m excited and it’s interesting to me that I explain why.

Everyday I go to work and with a great team of people and I deal with conflict. Projects that are in-flight, new commitments are made, deadlines are met or extended or flat-out missed (which is not good). Sometimes work is a disappointment and there’s always someone that’s upset or really pissed off. Sometimes I unintentionally let people down.

“Work sucks” or so the saying goes. It’s a challenge and it’s a constant test and conflict. How will I deal with this problem? Will someone or something piss me off and what drama will happen today?

I don’t think it sucks at all.

I’m one of the people in the middle of that organized chaos. When the alarm bell rings and it’s on me to figure it out and make it all work, I am one of the best firefighters there is. I’ll find the problem, I’ll get to the solution, I’ll have a dozen eyes on me all talking at the same time. I’ll have the support of my boss and co-workers. I won’t have any fear or hesitation. I’ll stand there on the call and get the job done. And I’ll do it with my characteristic and occasionally inappropriate sense of humor.

It’s not really different from a lot of jobs. My participation in the WordPress community is nothing like this at all.

Tomorrow I’ll be surrounded by developers, support people, designers and people I respect and admire and, most importantly, a number of friends. This will be my fourth WordCamp. I’ll be having great fun.

I will, once again, be intimidated. That’s not a bad thing.

You see, for me providing support for WordPress started out as therapy. Answering a topic in the forums and helping someone is fun and addictive. I occasionally help people out of a hole and that’s always cool.

Later on getting more involved meant helping people as well going behind the bar and moderating the forums. Cleaning out the spam queue, closing an occasional run away topic, stuff like that. I’m big on routines and I’m used to looking at the forums before the coffee set in.

My WordPress involvement went from being a form of therapy to using that involvement to becoming better at my job.

Collaborating with people in person and online improves me as a professional. The reason I’m intimidated is that, while I don’t think that my involvement is bad, I’m sure that I can improve. Or perhaps someone else can do it better than I do.

I’m comfortable with my intimidation. I don’t always have to be the one putting out the fires and I can learn more when I don’t have all the answers.

I’ll have a great time. I can’t wait to see the gang in person.

Fixing broken post_author IDs

In the long history of my of my blog (over 900 posts), I’ve done many things that were… ill-advised. I’m still recovering from messing up my media library somehow. All the images load but a couple of galleries disappeared.

While playing with the Wapuuvatar plugin I noticed that my recent 60 or so posts were showing my Gravatar photo but the older posts where showing a Wapuu. I thought I ran into some weird bug in the plugin. Ha! The plugin is fine. My old posts were set to post_author ID=0.

There is no such author ID but fixing it was straight forward. Here’s what I did.

WP-CLI is your friend

To get an idea of how bad the problem was I ssh’ed to my server, cd’ed to my installation and ran this command.

wp post list --fields=ID,post_title,post_name,post_date,post_author --url=blog.dembowski.net

This command outputs a neat table and the fields on the CLI include the post_author ID.

I wanted to see those fields and since I’m running on multisite I had to specify the URL. Yep, the recent posts were set correctly but almost all of the old ones were set to post_author=0. I probably could use wp-cli to fix it but I ended up using mysql commands.

wp db export ~/author-munging-save-me.sql

Backup your database, backup your database, backup your database. Don’t rely on your existing backup, just make a new one.

From my wp-config.php file I copied the mysql database name, user ID, password and table prefix. I then ran this command.

$ mysql -D mydbsitedbname -u mydbuser -p

Which put me on the mysql command line. The idea was to fix each post where the post_author=0. Easy!

And I promptly ran an update on the wrong table in my database.

A quick check showed me that nothing changed for what I was trying to fix. I’m not sure what I broke but I am sure I would be sorry if I didn’t fix it pronto.

Backups are good but do you know how to use them?

I wasn’t worried because I had that backup and ran this command.

$ mysql -D mydbsitedbname -u mydbuser -p < ~/author-munging-save-me.sql

You see, I like to poke at my site and while I don’t always break it I have done horrible things in the past. Everyday I make a full automated backup and once a week backup all of my files and I know how to restore the full database. I could rely on last night’s file but why bother? I just made a new one before working on the database.

I forgot that I was running multisite and that this blog is the second one in my site. The wrong post_author ID was 0, the correct ID is 1. I re-ran mysql on the command line and used this:

UPDATE myprefix_2_posts SET post_author=1 WHERE post_author=0;

A quick check and I’m good. The only thing that was updated was the post_author where I wanted it to be. I’m sure I would have caught this eventually but using the Wapuuvatar plugin pointed it out to me sooner.

Update: That broke things. The Gravatars on the front page went away. I rolled back the database and will look at being a little more selective on how I update the post_author.

Update for the update: When Twenty Sixteen only sees published posts from one author then the Gravatar isn’t displayed on the main list of posts. Nothing broke and I assigned Lily’s 3 posts to her account. 😉

Featured image photo by masatsu

Internet Explorer. Oh, the pain. Make it stop.

I like CSS. It’s clean, (mostly) standards based and while not all browsers will agree on goofy features, some basics should just work. CSS3 Flexbox support should be on that list for current versions of browsers.

Guess which browser doesn’t support “flex-direction: column”? Internet Explorer will not be updated by Microsoft for anything except security patches. The CSS works fine in the Edge browser.

In my last post I described how to get CSS to visually crop and center featured images. With Internet Explorer 11 the cropping worked but the image wasn’t vertically centered. The “overflow: hidden” did it’s job but the image displayed from the top and the rest was hidden.

Centering images using javascript

This is not a new problem and I found this article on how to use a little jQuery to make a browser do it’s thing. When it’s one image then you can use the class assigned to it.

I ended up adding this class to each featured image.

mh-thumbnail-<?php the_ID(); ?>;

Then I outputted this script where any featured image was.

<script type="text/javascript">
jQuery(document).ready(function() {

	var imageHeight_<?php the_ID(); ?>,
	wrapperHeight_<?php the_ID(); ?>,
	overlap_<?php the_ID(); ?>,
	container_<?php the_ID(); ?> = jQuery('.mh-thumbnail-<?php the_ID(); ?>');

	function centerImage() {
		imageHeight_<?php the_ID(); ?> = container_<?php the_ID(); ?>.find('img').height();
		wrapperHeight_<?php the_ID(); ?> = container_<?php the_ID(); ?>.height();
		overlap_<?php the_ID(); ?> = (wrapperHeight_<?php the_ID(); ?> - imageHeight_<?php the_ID(); ?>) / 2;
			container_<?php the_ID(); ?>.find('img').css('margin-top', overlap_<?php the_ID(); ?>);
	}

	if( BrowserDetect.browser == 'Explorer' ){
		jQuery(window).on("load resize", centerImage);
	}
});
</script>

That sucks. It’s doable, but I needed to use “the_ID()” because each featured image needed it’s own calculation to center correctly.

I did not want that “jQuery(window).on” to fire for anything except but Internet Explorer. jQuery removed the ability to easily detect the browser and for good reason: you should write scripts based on the browser’s capabilities and not the version or software vendor. My javascript skills are worse than my CSS.

I ended up using this script and I can detect “Explorer” now. Adding a line to my child theme’s functions.php file took care of that.

wp_enqueue_script( 'mh-browserdetect', get_stylesheet_directory_uri() . '/browserdetect.js' );

The end result is that for any current browser the CSS does it’s job. For Internet Explorer the javascript gives it that little push to get it to play nicely. I haven’t tried Internet Explorer 8 but I’m not sure I care to.

Working with version 11 already made me feel like I need a bath.

Center cropping featured images in CSS

I’m lazy and I like to try and figure out how to get the results I want without a lot of work. In the recent past I’ve uploaded featured images that were 1200 pixels wide and varying heights. I’m playing with a child theme of  Twenty Sixteen and wanted to center crop the existing featured images.

I could have re-sampled the cropped images one at a time in Photoshop Elements or ImageMagick (for some CLI bash shell fun). Or I could have used the Regenerate Thumbnails plugin and let that go. Instead I messed with CSS until it worked the way I liked. Continue reading “Center cropping featured images in CSS”

Disabling select features in WordPress

One of the new features arriving in WordPress 4.4 will be the ability to embed posts from a self-hosted WordPress blog  into oEmbed consumers such as another WordPress blog. Like this.

Feature Plugin Merge Proposal: oEmbed

Neat huh? I like it, though I haven’t been able to do the same with my own posts yet. This feature will be on by default in 4.4 though it could be disabled via a plugin.

What if you want to disable all the new features?

When a new feature is rolled out, it is enabled by default. That makes sense as no one adopts a feature that is disabled. But new features are not for everyone and you can control that via a plugin.

Why a plugin? Because it’s supportable. It doesn’t need to be a plugin, it could be a simple line of code in your child theme’s functions.php file.

Going in no particular order:

Disable oEmbed provider

This only applies to WordPress 4.4 (not released yet) but install and activate Pascal Birchler’s Disbable oEmbeds plugin. That will eliminate the capability for your site to be an oEmbed provider.

Disable XML-RPC

You could use a plugin but it’s one line of code. Edit your child theme’s functions.php file and add this one line.

add_filter( 'xmlrpc_enabled', '__return_false' );

Done.

Disable emoji support

Install and activate Otto’s Classic Smilies plugin. Otto doesn’t appreciate emojis either and as an added benefit you get back the classic smilies from previous WordPress versions.

Disable Ping-o-matic and other notifications

Install and activate Scott Reilly’s Silent Publish plugin.

From the plugin page:

This plugin gives you the ability to publish a post without triggering pingbacks, trackbacks, or notifying update services.

To make this the default behavior (Silent Publish is off by default) add this one line to your child theme’s functions.php file.

add_filter( 'c2c_silent_publish_default', '__return_true' );

Now when you go to the post editor page, you will see the “Silent publish?” checked on by default.

Disable Google fonts

Some people do not like anything related to Google and that’s fine. While I personally think this makes my WordPress site look awkward, here’s a plugin that does that.

Install and activate Remove Google Fonts References plugin.

Limit login attempts

I use Jetpack for a lot of things and Brute Protect prevents known attack IPs from reaching your site. If you want to limit your login attempts without using that plugin then try this one from BestWebSoft.

I selected that plugin because it’s actively supported by the author and has many options.

Disable Gravatars

Update: I forgot about Gravatars. 😉

There are a couple of ways to do that and the absolute simplest way is use the admin >> Settings >> Discussion and scroll down to the Avatars and uncheck that box. WP beginner has a post with a video on how to do that.

Use the Disabler plugin

Some more settings (including XML-RPC) can be toggled with the Disabler plugin. You can disable the following with a check box.

  • Disable Texturization
  • Disable auto-correction of WordPress capitalization
  • Disable paragraphs (i.e. <p> tags) from being automatically inserted in your posts.
  • Disable self pings (i.e. trackbacks/pings from your own domain).
  • Disable all RSS feeds.
  • Disable XML-RPC.
  • Disable auto-saving of posts.
  • Disable post revisions.
  • Disable WordPress from printing it’s version in your headers (only seen via View Source).
  • Disable WordPress from sending your URL information when checking for updates.

I use this plugin to disable self-pings.

Plugins are not that difficult to maintain

One of the common complaints about WordPress is “Why can’t there be a check box in the admin GUI to disable these features?” A quick count above shows that would be 16 boxes to work with.

Aaron Jorbin had a good reply on the make/core blog but it may not be clear to everyone: giving users too many options makes their site more difficult to support.

Ideally, there would be one plugin for all of this (hint to Mika and the other Disabler authors) but for anyone rolling out WordPress installations, these disabled settings can hard coded into a custom plugin.

Why do it that way? Just like disabling the XML-RPC feature, it’s often just a few lines of code. A custom plugin can accomplish what you want while limiting options in the administration backend.