Category Archives: Wordpress

Add custom CSS style to Advanced Custom Fields WYSIWYG field

Example of adding styles from a theme. The code below works on frontend (if you are using acf_form()) as well as in the backend.

add_filter( 'tiny_mce_before_init', function($mce_init) {
  $content_css = get_stylesheet_directory_uri() . '/your-custom-css.css';

  if (isset($mce_init[ 'content_css' ])) {
    $mce_init[ 'content_css' ] = "{$mce_init['content_css']},{$content_css}";
  }

  return $mce_init;
});

Source

Building the right administration interface for every user

WordPress Stockholm meetup group, January 2017

When building websites a lot of work is put into the frontend of the site – with good reason! But often the experience for content editors and site administrators isn’t given as much thought. However WordPress has a wide array of tools to easily make great admin interfaces.

In this talk we’ll take a look at the ecosystem of administration tools available for WordPress, as well as the different types of users that are likely to use the backend of the sites you build.

Slides

Migrating a WordPress Site From HTTP to HTTPS with WP-CLI

It’s as easy as:

Take a backup

wp db export

Test rewriting from HTTP to HTTPS

wp search-replace 'http://example.com' 'https://example.com' --dry-run

If everything is looking good, it’s time to rewrite:

wp search-replace 'http://example.com' 'https://example.com'

Some tutorials recommend adding the --skip-columns=guid flag. The train of thought is that old posts will be visible to RSS readers as new ones. I don’t think this is a big problem, and it’s much cleaner to not keep non-SSL urls in your database. It can also cause issues if you are using the GUID field to grab image urls/ids from attachments. (It’s a very popular way of mapping a URL to an attachment ID). With that in mind, I find it’s best to omit this flag.

Installing WordPress on a tiny wireless router

I recently got a Gl.Inet 6416 router off AliExpress for about $25. It’s an interesting little box that includes many features that routers ten times more expensive lack. (Thanks OpenWRT and open source!) The box is powered by the Atheros AR9331, an aging MIPS architecture processor clocked at a measly 400mhz with 64MB of RAM and 16MB of storage. In computer years, MIPS is stone-age technology, first launched in 1981(!), and the MIPS 24K standard this particular processor implements was first launched in 2004.

view3

But the router is still quite capable even by 2016 standards! There is an SSH server and a package manager, opkg, which has packages for PHP 5.6. I immediately thought of something crazy to do – namely to install WordPress on this poor little machine.

So let’s see how that works.

Scaling things down

64MB of memory can’t accomodate either Apache or MySQL, so we have to find a way to run without them. Luckily, PHP has a built-in web server since version 5.4 that we can use, and WordPress has a SQLite plugin. This is a truly cool plugin that hooks into the db.php drop-ins and dynamically rewrites all WordPress database calls from MySQL to SQLite-compatible syntax.

sqlite-e-WordPress

Increasing the storage

16 MB of internal storage won’t get us far. Luckily, you can insert a USB drive and it happily mounts it under /mnt/sda1, so let’s do that:

IMG_20160717_031209-01 - Copy

Installing dependencies

Let’s SSH into the router and install SQLite, PHP and some useful tools like wget…

opkg install zoneinfo-core sqlite3-cli sqlite3 wget htop ca-certificates php5-cli php5 php5-mod-session php5-mod-pdo-mysql php5-mod-gd php5-mod-hash php5-mod-mbstring php5-mod-json php5-mod-opcache php5-mod-sqlite3 php5-mod-pdo-sqlite

Installing WordPress

Unfortunately, there is no support for Phar archives and hence no simple way to run WP-CLI or Composer, so let’s install WP manually:

cd /mnt/sda1
wget https://wordpress.org/wordpress-4.5.3.zip
unzip wordpress-4.5.3.zip
wget https://downloads.wordpress.org/plugin/sqlite-integration.1.8.1.zip
unzip sqlite-integration.1.8.1.zip
mv sqlite-integration wordpress/wp-content/plugins

Now let’s move the db.php drop-in into place:

cp wordpress/wp-content/plugins/sqlite-integration/db.php wordpress/wp-content/db.php

Let’s also create a default wp-config.php file:

cp wordpress/wp-config-sample.php wordpress/wp-config.php

Tweaking the PHP config

Some PHP defaults aren’t a good fit for this ancient architecture. Let’s decrease opcache.memory_consumption from 64MB to 8MB and increase the max_execution_time from 30 to 300 in /etc/php.ini

Booting it up

Now let’s finally start this baby up on the built-in PHP web server:

cd wordpress
php-cli -S 0.0.0.0:8080

Loading up the browser the router IP on port 8080 gives us a familiar sight:

http://192.168.8.1:8080

http://192.168.8.1:8080

Thanks to the SQLite adapter, we don’t need to provide database credential, an on-disk database has already been created for us in wordpress/wp-content/database/.ht.sqlite.

After about 40 seconds, the install finally finishes!

2016-07-17 02_52_28-Program Manager

So what’s the speed like?

It comes as no surprise that this is suh-low! A pageload takes 5-15 seconds. Sometimes even longer if you are saving a draft or publishing a post:

2016-07-17 02_56_33-Program Manager

Other than that, it does actually run! Although uploading large images tends to make the built-in server crash with an out-of-memory error. Not surprising, considering we only have about 40 MB of RAM to play with (The operating system takes up approximately 25MB RAM).

Conclusion

Even though this is a silly project it shows that it is not only possible to run WordPress on OpenWRT, but that it is fairly pain-free to set up. There are more powerful MIPS processors out there (like the Qulcomm QCA9531 with 650mhz/128MB RAM) and those might actually make this usable for a real site. Hope you learned about some techniques to use WordPress in low-memory environments!

Disable preview in the WordPress theme Customizer

The WordPress Customizer preview can be notoriously buggy. Here is a snippet for easily disabling the customizer preview:

add_action( 'customize_preview_init', function() {
    die("The customizer is disabled. Please save and preview your site on the frontend.");
}, 1);

After adding this code to your themes functions.php file or a plugin, the live preview will simply show a message that it is disabled.

Screen Shot 2016-05-06 at 15.34.11

Use Jetpack without connecting a WordPress account

There is a nifty developer mode that makes it possible to use Jetpack without connecting a WordPress.com account to your site – making it essentially “offline-mode”. If you’re a user of the now deprecated JP Plugins that allowed you to use Jetpack features without Jetpack itself, this is a good alternative.

To enable developer mode, you can either put the following in your wp-config.php file:

define( 'JETPACK_DEV_DEBUG', true);

…or you can add this filter to a plugin or your themes functions.php file:

add_filter( 'jetpack_development_mode', '__return_true' );

This tweak is also available in plugin form! Head over to WordPress.org to download Unplug Jetpack!

When using the development mode, some Jetpack features aren’t available, here is the complete list of available and unavailable features: jetpack-lite

Note
While you don’t connect Jetpack to an account, some of the available features (like Sharing buttons) might still make calls to the Jetpack servers.

Facebook oEmbed support for WordPress

Facebook has now publicly released oEmbed support, and a WordPress core ticket is under way to add support in a future WordPress version.

If you want to try out the new Facebook oEmbed support today, you can download and install this plugin: GitHub project or Direct zip download.

Here is an example of what the embed looks like:
fb-oembed

If you prefer the code, here it is in its entirety:

<?php
/*
Plugin Name: Facebook oEmbed
Version: 1.1
Author: khromov
*/

/**
 * https://core.trac.wordpress.org/ticket/34737
 */
add_action('init', function() {

    $endpoints = array(
        '#https?://www\.facebook\.com/video.php.*#i'          => 'https://www.facebook.com/plugins/video/oembed.json/',
        '#https?://www\.facebook\.com/.*/videos/.*#i'         => 'https://www.facebook.com/plugins/video/oembed.json/',
        '#https?://www\.facebook\.com/.*/posts/.*#i'          => 'https://www.facebook.com/plugins/post/oembed.json/',
        '#https?://www\.facebook\.com/.*/activity/.*#i'       => 'https://www.facebook.com/plugins/post/oembed.json/',
        '#https?://www\.facebook\.com/photo(s/|.php).*#i'     => 'https://www.facebook.com/plugins/post/oembed.json/',
        '#https?://www\.facebook\.com/permalink.php.*#i'      => 'https://www.facebook.com/plugins/post/oembed.json/',
        '#https?://www\.facebook\.com/media/.*#i'             => 'https://www.facebook.com/plugins/post/oembed.json/',
        '#https?://www\.facebook\.com/questions/.*#i'         => 'https://www.facebook.com/plugins/post/oembed.json/',
        '#https?://www\.facebook\.com/notes/.*#i'             => 'https://www.facebook.com/plugins/post/oembed.json/'
    );

    foreach($endpoints as $pattern => $endpoint) {
        wp_oembed_add_provider( $pattern, $endpoint, true );
    }
});

Override default Yoast SEO settings in WordPress

Sometimes the default Yoast SEO settings aren’t quite the way you want. For example, I wanted to enable twitter cards using the “Summary with large image” card type by default on a multisite network. Below you’ll find a snippet that does that, and can also be adapted to change any default option while still letting users override them if desired.

add_filter('wpseo_defaults', function($defaults, $option_name) {
  if($option_name === 'wpseo_social') {
    $defaults['twitter'] = true;
    $defaults['twitter_card_type'] = 'summary_large_image';
  }
  return $defaults;
}, 10, 2);

Tip

Looking for the proper $option_name ? If you enable the WP_DEBUG constant in your wp-config.php, it’ll show up on the relevant tab in the Yoast SEO admin:

seo-screengrab

This snippet was tested with Yoast SEO 2.3.5, but is likely to work for both older and newer versions.