Plugin: WordPress Gutenberg Hot Module Replacement Example

Gutenberg is coming to town, and we’re all excited to see what goodies we’re getting. Developing a Gutenberg block can mean a lot of page refreshing to see your updates to your interface elements. Here’s an example of how to use React’s hot module replacement for Gutenberg block development: no more death by a thousand cuts reloads.

Fork, create an issue or pull request on GitHub.

Plugin: Automatic submenu items

At some point our navigation menu started to mimic the hierarchical structure of the posts itself. Manually adding all items just seemed silly. This sounded like a good candidate for wp_list_pages(). Hardcoding the menu would mean losing flexibility, however. It would be nice if all child posts would be added automatically, with the option of overriding that behaviour by manually adding menu items.

With WordPress it’s like “Filter all the Things”, hence the Submenu 3000 plugin.

Continue reading “Plugin: Automatic submenu items”

Get an excerpt for a post outside of the loop

The WordPress get_the_excerpt() function does not behave well outside of a loop.

This will do so nicely:

 * Get the excerpt for a post for use outside of the loop.
 * @param int|WP_Post $post ID or WP_Post object.
 * @param int         Optional excerpt length.
 * @return string Excerpt.
function prefix_get_the_excerpt( $post, $excerpt_length = null ) {

	$excerpt = get_post_field( 'post_excerpt', $post );

	if ( '' === $excerpt ) {

		$content = get_post_field( 'post_content', $post );

		// An empty string will make wp_trim_excerpt do stuff we do not want.
		if ( '' !== $content ) {

			$excerpt = strip_shortcodes( $content );

			/** This filter is documented in wp-includes/post-template.php */
			$excerpt = apply_filters( 'the_content', $excerpt );
			$excerpt = str_replace( ']]>', ']]>', $excerpt );

			if ( ! $excerpt_length ) {
				/** This filter is documented in wp-includes/formatting.php */
				$excerpt_length = apply_filters( 'excerpt_length', 55 );

			/** This filter is documented in wp-includes/formatting.php */
			$excerpt_more = apply_filters( 'excerpt_more', ' ' . '[…]' );

			$excerpt = wp_trim_words( $excerpt, $excerpt_length, $excerpt_more );

	return apply_filters( 'the_excerpt', $excerpt );

 * The excerpt for a post for use outside of the loop.
 * @param int|WP_Post $post ID or WP_Post object.
 * @param int         Optional excerpt length.
function prefix_the_excerpt( $post, $excerpt_length = null ) {

	echo wp_kses_post( prefix_get_the_excerpt( $post, $excerpt_length ) );

Set “Envelope-From” header for wp_mail()

WordPress emails were not being sent out by the server. But why?
In this case the site is hosted by Goneo.
As it appears Goneo requires:

  1. Emails to be sent from an address registered with them
  2. The ‘Envelope-From’ email header set to that address

It’s not a bug, it’s a feature!

Set the thing…

WordPress sends its emails via the wp_mail() function. In turn, this function uses the PHPMailer library to generate and send the actual email. Just before sending the mail, wp_mail() calls the helpful phpmailer_init action which gives us access to the PHPMailer instance. This is where we can use the setfrom() method to set the Envelope From header:

add_action( 'phpmailer_init', 'prefix_add_phpmailer_setfrom' );

 * Add setFrom for hosts that insist on making life hard.
 * @param array $phpmailer The PHPMailer instance, passed by reference.
function prefix_add_phpmailer_setfrom( $phpmailer ) {

		get_option( 'admin_email' ), // From email address.
		'WordPress' // From name.


Fluid text (or any other property) size depending on screen width

Responsive text styles depending on screen size is all the rage these days.
Here’s an example of a sass mixin that lets you define a screen width where a max value should be reached, and the smallest value it is allowed to have. It will interpolate between these values automatically.

 * Interpolate a value down to a minimum value from its
 * maximum at a defined viewport width
 * @param {string} $property           The css attribute, eg. 'font-size'
 * @param {int}    $value_min          Minimum value in pixels.
 * @param {int}    $value_max          Minimum value in pixels.
 * @param {int}    $viewport_width_max Viewport width for the max value.
@mixin vw-min-max( $property, $value_min, $value_max, $viewport_width_max ) {

	$vw: ( $value_max / $viewport_width_max ) * 100;
	$min_width: ( $value_min / $vw ) * 100;
	$mq_min: #{$min_width}px;
	$mq_max: #{$viewport_width_max}px;

	#{$property}: #{$value_min}px;
	@media all and (min-width: $mq_min) {
		#{$property}: #{$vw}vw;
	@media all and (min-width: $mq_max) {
		#{$property}: #{$value_max}px;

For example: A header should have a font-size of 80px at 1000px wide, and grow smaller on narrower screens, but not smaller than 20px.

h2 {
	@include vw-min-max( 'font-size', 20, 80, 1000 );

See it in use on my portfolio site, where it is applied not only to text, but also various divs to create a fluid appearance on window resize.

Sublime Text Plugin: WordPress Coding Standards whitelist flags

Update: The native WPCS whitelist flags are deprecated in v3.0.0 in favour of the PHPCS // phpcs:ignore format. The plugin has been updated to use that format in stead.

A Sublime Text 2/3 autocomplete plug-in for WordPress Coding Standards whitelist flags.
Install the plugin via Sublime Text’s Package Control by searching for WPCS whitelist flags.


An autocomplete popup will open when you type `wpcs` or `phpcs`.

Fork, create an issue or pull request on GitHub