Typist Tech https://www.typist.tech We type code to make your WordPress sites faster Thu, 18 May 2017 13:52:28 +0000 en-US hourly 1 https://wordpress.org/?v=4.7.4 https://asset.typist.tech/wp-content/uploads/2017/01/cropped-typist-logo-512x512-3-150x150.png Typist Tech https://www.typist.tech 32 32 Running WordPress Plugin Acceptance Tests on TravisCI https://www.typist.tech/wordpress-plugin-acceptance-tests-travisci/?utm_source=rss&utm_medium=rss&utm_campaign=wordpress-plugin-acceptance-tests-travisci https://www.typist.tech/wordpress-plugin-acceptance-tests-travisci/#respond Sun, 12 Mar 2017 12:28:20 +0000 https://www.typist.tech/?p=560 We have written come acceptance tests in the last tutorial. Time to run them on the cloud. No way I would spend 10 minutes to wait for my tests ran for multiple PHP and WordPress versions. Continue from the last tutorial, I’ve removed some unused pieces and added PHP_CodeSniffer to the project. Nothing related to acceptance testing. Head over […]

This article is first posted on Running WordPress Plugin Acceptance Tests on TravisCI

]]>
We have written come acceptance tests in the last tutorial. Time to run them on the cloud. No way I would spend 10 minutes to wait for my tests ran for multiple PHP and WordPress versions.

Continue from the last tutorial, I’ve removed some unused pieces and added PHP_CodeSniffer to the project. Nothing related to acceptance testing. Head over to the GitHub repo if you are interested.

Prevent Race Conditions

A problem I found is that the tests failed randomly. The reason is that our tests tries to click some links before they show up on the screen. Adding $I->waitForElement('some element', 10); solves the problem.

Scroll To the Link

Secondly, when changing the screen size, the link
Acceptance Test for rmcl fails out of the screen. Adding
$I->click('Acceptance Test for rmcl'); solves it.

So the tests become:

$I->amOnpage('/'); 
$I->waitForElement('p.site-description', 10); 
$I->scrollTo(['css' => 'h2.entry-title']); 

Use PhantomJS

You can run the tests on real browsers on TravisCI with Sauce Labs. But it’s too slow for me. I opt for PhantomJS instead.

Install PhantomJS

The Selenium server I used the last tutorial becomes buggy. I switched to use PhantomJS lately.

$ composer require --dev  jakoch/phantomjs-installer neronmoon/scriptsdev site5/phantoman

Then, add this section in composer.json:

"scripts-dev": {
    "post-install-cmd": [
        "PhantomInstaller\\Installer::installPhantomJS"
    ],
    "post-update-cmd": [
        "PhantomInstaller\\Installer::installPhantomJS"
    ]
}

PhpStorm (or your IDE) would complain scripts-dev is not valid in composer.json. It’s totally fine because we only want to install PhantomJS on dev environment. I’ve made a pull request to move it into the extra section. Until it’s merged, ignore the warning.

Codeception Config

First, create a codeception.dist.yml file so we can have different settings for different environments (local and Travis). Moving the settings in acceptance.suite.yml into codeception.dist.yml makes it easier to manage the settings. Here is all the settings we need for local and for TravisCI.

# tests/acceptance.suite.yml
class_name: AcceptanceTester
modules:
  enabled:
    - \Helper\Acceptance
    - WPDb
    - WPWebDriver
#codeception.dist.yml
actor: Tester
paths:
  tests: tests
  log: tests/_output
  data: tests/_data
  helpers: tests/_support
settings:
  backup_globals: false # See: https://core.trac.wordpress.org/ticket/39327
  bootstrap: _bootstrap.php
  shuffle: true
  colors: true
  memory_limit: 1024M
modules:
  config:
    WPDb:
      dsn: 'mysql:host=localhost;dbname=wordpress'
      user: 'root'
      password: ''
      dump: 'tests/_data/dump.sql'
      url: 'http://wp.dev:8080'
    WPWebDriver:
      url: 'http://wp.dev:8080'
      port: 4444
      window_size: '1024x768'
      adminUsername: 'admin'
      adminPassword: 'password'
      adminPath: '/wp-admin'
      host: 'wp.dev'
      browser: 'phantomjs'
      activatePlugins: ['medium/medium.php']
extensions:
  enabled:
    - Codeception\Extension\Phantoman
  config:
    Codeception\Extension\Phantoman:
      port: 4444
      suites: ['acceptance']
# codeception.yml
modules:
  config:
    WPDb:
      dsn: 'mysql:host=vvv.dev;dbname=rmcl-tester'
      user: 'external'
      password: 'external'
      url: 'http://rmcl-tester.dev'
    WPWebDriver:
      url: 'http://rmcl-tester.dev'
      host: '127.0.0.1'

Run the Tests Again

With the above configs, running $ composer install or $ composer update will install PhantomJS also.

$ composer install
PhantomInstaller\Installer::installPhantomJS
- Installing phantomjs (2.1.1): Loading from cache

 

When running acceptance tests, PhantomJS starts and stops itself automatically.

Codeception Phantoman Extension
Codeception Phantoman Extension

Building the Plugin

We need a way to install our plugin on travis. Using composer archive to generate a zip file and then install it via WP-CLI seems the simplest solution. Adding a composer build command into composer.json:

"scripts": {
    "build": [
        "rm -fr vendor",
        "composer install --no-dev --prefer-dist --no-suggest",
        "composer archive --format=zip --dir=release --file=remove-medium-cross-links"
    ],
},
"archive": {
    "exclude": [
        "/*",
        ".*",
        "!/languages",
        "!/src",
        "!/vendor",
        "!/LICENSE",
        "!/README.txt",
        "!/*.php"
    ]
}

Now, run $ composer build to make the zip file. This is the final plugin you want to publish on wordpress.org. Note that we don’t need vendor in this simple plugin, but it’s required in most of the cases. You can also add more tasks in the build process, for example: grunt addtextdomain and grunt makepot.

Finally, TravisCI Settings

# .travis.yml
language: php

sudo: false

services:
  - mysql

addons:
  apt:
    packages:
      - nginx

php:
  - 7.0
  - 7.1
  - nightly

env:
  global:
    - COMPOSER_NO_INTERACTION=1
  matrix:
    - WP_VERSION=nightly
    - WP_VERSION=latest
    - WP_VERSION=4.7.2

matrix:
  allow_failures:
    - php: nightly
    - env: WP_VERSION=nightly
  fast_finish: true

before_install:
  # Install helper scripts
  - travis_retry composer global require --prefer-dist --no-suggest typisttech/travis-nginx-wordpress:"^2.0"
  - export PATH=$HOME/.composer/vendor/bin:$PATH
  - tnw-install-nginx
  - tnw-install-wordpress
  - tnw-prepare-codeception

  # Build the production plugin
  - travis_retry composer build
  # Install the medium plugin
  - wp plugin install medium --force --activate --path=/tmp/wordpress
  # Activate the plugin
  - wp plugin install ./release/remove-medium-cross-links.zip --force --activate --path=/tmp/wordpress
  # Export a dump of plugin-activated database to the _data folder
  - wp db export $TRAVIS_BUILD_DIR/tests/_data/dump.sql --path=/tmp/wordpress

install:
  - travis_retry composer install --prefer-dist --no-suggest

script:
  - vendor/bin/codecept run acceptance

 

Most of the work is done through the travis-nginx-wordpress package:

  1. Install Nginx
  2. Install correct version of WordPress core
  3. Ensure WordPress databases at localhost is ready for testing
  4. Start WordPress server at http://wp.dev:8080

Next, we build and install our plugin along with the official Medium plugin. Finally, install dependencies and actually run the tests.

Pushing to GitHub should trigger TravisCI to run the tests.

Tweaking

Caching

You can cache apt and composer packages to speed up the build. Make sure you add the --prefer-dist flag in $ composer install and add this section to .travis.yml:

cache:
  apt: true
  directories:
    - $HOME/.composer/cache/files

Travis Nginx WordPress

There’re more helper scripts from the  travis-nginx-wordpress package, find out more here.

Until Next Time…

Full source code is can be found on GitHub.

Nothing stops our journey to TravisCI. I will talk about how to publish the plugin to wordpress.org after tests passed. Make sure you have subscribed my newsletter!

This article is first posted on Running WordPress Plugin Acceptance Tests on TravisCI

]]>
https://www.typist.tech/wordpress-plugin-acceptance-tests-travisci/feed/ 0
WordPress Plugin Acceptance Test with Codeception on VVV https://www.typist.tech/wordpress-plugin-acceptance-test-codeception-vvv/?utm_source=rss&utm_medium=rss&utm_campaign=wordpress-plugin-acceptance-test-codeception-vvv https://www.typist.tech/wordpress-plugin-acceptance-test-codeception-vvv/#respond Thu, 12 Jan 2017 03:43:52 +0000 https://www.typist.tech/?p=482 Tutorial on how to leverage Varying Vagrant Vagrants, Codeception and wp-browser to write acceptance tests for WordPress plugins.

This article is first posted on WordPress Plugin Acceptance Test with Codeception on VVV

]]>
Ever anxious about pushing new release of WordPress plugin causing the white screen of death on your clients’ sites? You should write some acceptance tests! I will demonstrate how to leverage Varying Vagrant Vagrants, Codeception and wp-browser to write acceptance tests for WordPress plugins.

The Tools

Codeception

Codeception is a PHP testing framework built on PHPUnit that automates acceptance testing. It does functional and unit tests also.

wp-browser

wp-browser is a WordPress specific set of extensions for Codeception written by theAverageDev.

The package includes a class extending Codeception PhpBrowser module that adds WordPress related assertions for cest and cept tests, an extension of Codeception own Db module meant to allow for more comfortable WordPress specific database handling and testing and a class taking care of installing and loading a WordPress installation relying on WordPress automated testing suite.

Start with VVV

We’ll run our tests from within VVV because WP CLI, Node, and Composer are already installed for us there.

Before we actually writing the tests, we need a WordPress installation and a plugin to test. I use my plugin Remove Medium Cross Links as an example. All it does is remove the medium cross link footer from WordPress post.

medium cross link footer
medium cross link footer

Preparation

Create a WordPress site in VVV so that we can run our plugin on.

$ vv create
New VVV Site Setup
Name of new site directory: rmcl-tester

And create our plugin.

$ vagrant ssh
$ cd /srv/www/rmcl-test/htdocs/wp-content/plugins
$ wp scaffold plugin remove-medium-cross-links

The plugin is simple. Add these lines in remove-medium-cross-links.php

function remove_medium_cross_links() {
	remove_action( 'init', array( 'Medium_Site', 'init' ) );
}

if ( ! is_admin() ) {
	add_action( 'init', 'remove_medium_cross_links', 5 );
}

Test Manually

  1. Head to rmcl-tester.dev
  2. Install and activate the official Medium plugin
  3. Add the Medium Integration Token on your profile page
  4. Add a new post and make sure it cross posted to medium
  5. Go to the new post. You should see the cross link footer
  6. Activate our remove-medium-cross-links plugin
  7. Go back the post. The cross link footer should be gone

Database Snapshot

Codeception will reset the database between every test. We need to make this database dump.

$ wp db export tests/_data/dump.sql --path=/srv/www/rmcl-test/htdocs
Success: Exported to 'tests/_data/dump.sql'.

If you have a more complex setup, you could use WP Migrate DB Pro to fine tune the sql dump.

Start Testing

Install latest stable WPBrowser package via Composer:

$ composer require lucatume/wp-browser --dev

It might take a while. But once it’s done, we can configure Codeception and wp-browser. Answer the questions. Use default if not shown below.

$ vendor/bin/wpcept bootstrap -i
MySQL database host? (localhost) rmcl-test.dev
Test database name? (database) rmcl-test
Test database password? () root
Integration tests database password? () root
WordPress site url? (http://wp.dev) http://rmcl-test.dev
Absolute path to the WordPress root directory? (/var/www/wp) /srv/www/rmcl-test/htdocs/
Activate a plugin? (order matters, leave blank to move on) medium/medium.php
Activate a plugin? (order matters, leave blank to move on) remove-medium-cross-links/remove-medium-cross-links.php

Acceptance Test for Real

Time for our first acceptance test.

$ vendor/bin/wpcept generate:cept acceptance RemoveMediumCrossLinkFooter

In the generated tests/acceptance/RemoveMediumCrossLinkFooterCept.php

<?php 
$I = new AcceptanceTester($scenario); $I->wantTo('test medium cross link footer is removed');

$I->amOnpage('/');
$I->click('Acceptance Test for rmcl');

$I->dontSee('Also published on Medium.');

However, it’s dangerous to just testing what we don’t see. Make a sanity check also.

$ vendor/bin/wpcept generate:cept acceptance SanityCheck

In tests/acceptance/SanityCheckCept.php:

<?php 
$I = new AcceptanceTester($scenario); $I->wantTo('see medium cross link footer when rmcl is deactivated');

$I->loginAsAdmin();
$I->amOnPluginsPage();
$I->deactivatePlugin('remove-medium-cross-links');

$I->amOnpage('/');
$I->click('Acceptance Test for rmcl');

$I->see('Also published on Medium.');

Note: loginAsAdmin(), amOnPluginsPage() and deactivatePlugin come from wp-browser. Check the docs for more WordPress-specific methods.

Run the Acceptance Tests

$ vendor/bin/wpcept run acceptance

If you follow along, your tests should pass.

wpcept run acceptance
wpcept run acceptance

Real Browser Testing

Two green ticks sounds good. But where is the freaky browser jumping around and clicking itself you found on all those acceptance test demo? By default wp-browser run acceptance tests on WPBrowser, a PHP based, JavaScript-less and headless browser for acceptance testing not requiring JavaScript support.

We can do better, since VVV doesn’t provide GUI support. We will run the tests outside VVV, using your real browsers.

Selenium Server

Open a new tab in the terminal:

$ npm install selenium-standalone@latest -g
$ selenium-standalone install
$ selenium-standalone start

Note: The default version coms with this package is quite old. You can use $ selenium-standalone install --version=3.0.1 --drivers.firefox.version=0.13.0 --drivers.chrome.version=2.27 and $ selenium-standalone start --version=3.0.1 --drivers.firefox.version=0.13.0 --drivers.chrome.version=2.27 to specific selenium and drivers versions.

WPWebDriver

WPWebDriver – a Guzzle based, JavaScript capable web driver; to be used in conjunction with a Selenium server, PhantomJS or any real web browser for acceptance testing requiring JavaScript support

Head back to tests/acceptance.suite.yml and instruct Codeception to use WPWebDriver instead.

class_name: AcceptanceTester
modules:
    enabled:
        - \Helper\Acceptance
        - WPDb
        - WPWebDriver
    config:
        WPDb:
            dsn: 'mysql:host=rmcl-test.dev;dbname=rmcl-test'
            user: root
            password: root
            dump: tests/_data/dump.sql
            populate: true
            cleanup: true
            url: 'http://rmcl-test.dev'
            tablePrefix: wp_
        WPWebDriver:
            url: 'http://rmcl-test.dev'
            adminUsername: admin
            adminPassword: password
            adminPath: /wp-admin
            wait: 5
            host: '192.168.50.1'
            browser: chrome

Run the Acceptance Tests Again

With $ selenium-standalone start running in another tab.

$ vendor/bin/wpcept build
$ vendor/bin/wpcept run acceptance

Always good idea to run $ wpcept build whenever you changed the config files.

A chrome tab will jump out and freaking around this time. As before, the tests should pass.

Stay tuned

Be sure to subscribe the my newsletter. I will talk about how to run these acceptance tests on TravisCI soon.

This article is first posted on WordPress Plugin Acceptance Test with Codeception on VVV

]]>
https://www.typist.tech/wordpress-plugin-acceptance-test-codeception-vvv/feed/ 0
Ensure WP Cron Runs On Time https://www.typist.tech/ensure-wp-cron-runs-on-time/?utm_source=rss&utm_medium=rss&utm_campaign=ensure-wp-cron-runs-on-time https://www.typist.tech/ensure-wp-cron-runs-on-time/#respond Sat, 07 Jan 2017 00:10:09 +0000 https://www.typist.tech/?p=460 How to configure WP Cron to work properly via Linux crontab and Uptime Robot. Ensure WP Cron runs on time.

This article is first posted on Ensure WP Cron Runs On Time

]]>
WP Cron is the schedule system implementation of WordPress. Unlike linux cron, it doesn’t guarantee jobs are performed on time. Ever wondered why your scheduled posts not posted at specific time but suddenly published when you log in to WordPress dashboard to check out what’s wrong? You are the victim of WP cron.

How does WP Cron Work?

Scheduled jobs are saved into database and wait for WP Cron to perform them. However, unlike traditional cron systems, it’s doesn’t watch the clock periodically. 

WP Cron only checks for due jobs when any WordPress page is loaded.See the problem?Click To Tweet

WP Cron Problems on Low Traffic Sites

On a low-traffic WordPress site, WP Cron often perform the scheduled jobs beyond their specific time because nobody visits WordPress. Thus, nobody triggers WP Cron to check for scheduled jobs. Finally, someone visit WordPress and fires too many jobs, causing PHP timeouts.

WP Cron Problems on High Traffic Sites

On the other hand, high-traffic sites trigger WP Cron too often. As jobs are saved in database, querying for cron jobs become a waste of resource. Worse still, multiple WP Cron instances might performing the same job at the same time. This could be problem if the jobs are not idempotent (safely execute multiple times). Lucky for you, WordPress has a better locking system and much less issues about this is reported since version 3.

Solution to WP Cron

To prevent WP Cron not fired or triggered too often, we can use a real cron job to execute it.

Disable WP Cron

First, disable the default WP Cron behaviour. Add this line in wp-config.php.


define( 'DISABLE_WP_CRON',  true );

So no WP Cron is performed when page loads.

Using Linux Crontab

SSH to your sever and run $ sudo crontab -e. Add this line at the end of the file. Make sure you replace the path to your WordPress root.


# m h dom mon dow command
*/5 * * * * php /PATH/TO/WORDPRESS/ROOT/wp-cron.php > /dev/null 2>&1

This tells linux server to execute WP Cron every 5 minutes and throw all output messages away. 5-minute interval is suitable for most WordPress sites, modify it if needed.

Visiting wp-cron.php Periodically

If you have no access to crontab, you can visit wp-cron.php via internet. Again, add this line to wp-config.php.

define( 'DISABLE_WP_CRON',  true );

Using Uptime Robot

Sign up a Uptime Robot account and make a HTTP(s) monitor to https://YOUR-WEBSITE.com/wp-cron.php?doing_wp_cron. Check my tutorial about Uptime Robot here.

Uptime Robot WP Cron Trigger
Uptime Robot WP Cron Trigger

Do you need to Do it?

WP Cron is a must. Scheduled posts, automatic backup, auto-share to social media and all WordPress functionalities that perform in the future need WP Cron. Make sure you configure WP Cron to work properly.

However, if you are on WP Engine, they have a true cron that runs every minute on the minute for you. You don’t have to do anything.

This article is first posted on Ensure WP Cron Runs On Time

]]>
https://www.typist.tech/ensure-wp-cron-runs-on-time/feed/ 0
Monitoring Uptime with Uptime Robot for Free https://www.typist.tech/monitoring-uptime-with-uptime-robot-for-free/?utm_source=rss&utm_medium=rss&utm_campaign=monitoring-uptime-with-uptime-robot-for-free https://www.typist.tech/monitoring-uptime-with-uptime-robot-for-free/#respond Thu, 05 Jan 2017 07:21:32 +0000 https://www.typist.tech/?p=433 What is worst than having downtime? Answer: Having downtime without noticing it. Here come Uptime Robot, a free service let you create 50 monitors that checks every 5 minutes, not to mention email alert, mobile apps, API support and public status pages. Start Monitoring in 30 Seconds.

This article is first posted on Monitoring Uptime with Uptime Robot for Free

]]>
What is worst than having downtime? Answer: Having downtime without noticing it. Here come Uptime Robot, a free service let you create 50 monitors that checks every 5 minutes, not to mention email alert, mobile apps, API support and public status pages.

Start Monitoring in 30 Seconds

Uptime Robot homepage
Uptime Robot homepage

Head to Uptime Robot’s website and create an account. You have to verify your email address before continue. This is probably the hardest part in this tutorial.

HTTP Monitors

Upon logging into the dashboard, add a new HTTP monitor using the button on the top left corner. Enter a human-readable name and the URL you want to monitor. I use Typist Tech’s homepage as an example. Make sure you also selected “Alert Contacts To Notify”.

Uptime Robot HTTP Monitor
Uptime Robot HTTP Monitor

Uptime Robot will check this URL every 5 minutes, if 4xx or 5xx response is returned, it makes several more checks from other locations in the next 30 seconds. If the URL is still down, it sends an alert.

Keyword Monitors

Being a WordPress site maintainer, 2xx response is not enoughClick To Tweet

Let’s add a keyword monitor. Uptime Robot checks my site tagline and alerts me if tagline not found.

Uptime Robot Keyword Monitor
Uptime Robot Keyword Monitor

Which Pages Should I Monitor?

It’s totally up to you. For a typical WordPress blog, I would suggest:

  • Homepage
  • Blog page
  • XML Sitemap
  • Contact page
  • One of your blog post
  • One of your blog post (AMP version)

If you are not using a managed hosting such as WP Engine, Kinsta or Page.ly, you should add ping monitors to server IPs as well.

Public Status Page

Why not tell the world about your 100% uptime? Go to “Add Public Status Page” under “My Settings”. You can add a logo and make a custom URL (via CNAME). Note that if you want this status page to be public, don’t enter any password!

Uptime Robot public status-page-settings
Uptime Robot public status-page-settings

Here is the results. Or, see Typist Tech’s live status page here.

I know… I know… It’s not 100%. But 100% is boring and even the big players can’t achieve it.

To be continued….

There are more features you can get from Uptime Robot like mobile apps, API support, slack integration and much more. Subscribe to our newsletter! More articles about monitoring is coming. New Relic, AppDynamic, Pingdom…. Leave a comment below, tell me which one you want first.

This article is first posted on Monitoring Uptime with Uptime Robot for Free

]]>
https://www.typist.tech/monitoring-uptime-with-uptime-robot-for-free/feed/ 0
Cross Posting WordPress to Medium without Hurting SEO https://www.typist.tech/cross-posting-wordpress-to-medium-without-hurting-seo/?utm_source=rss&utm_medium=rss&utm_campaign=cross-posting-wordpress-to-medium-without-hurting-seo https://www.typist.tech/cross-posting-wordpress-to-medium-without-hurting-seo/#respond Thu, 05 Jan 2017 01:14:31 +0000 https://www.typist.tech/?p=304 Syndicating content to third-party sites may not be safe. If don’t support the use of the rel="canonical" tag. Chance are they outrank you on SEO and makes Google thinks they are the original authors. Worse still, Google penalise you on duplicate content. Good news is Medium do support canonical tags. Thus, you can trust Medium to repost your articles without hurting Google rankings.

This article is first posted on Cross Posting WordPress to Medium without Hurting SEO

]]>
Syndicating content to third-party sites may not be safe. If don’t support the use of the rel="canonical" tag. Chance are they outrank you on SEO and makes Google thinks they are the original authors. Worse still, Google penalise you on duplicate content. Good news is Medium do support canonical tags. Thus, you can trust Medium to repost your articles without hurting Google rankings.

Why Cross Posting to Medium?

First thing first, why re-posting WordPress content to Medium at all? The answer is simple: Get more readers that actually read! Medium has an algorithm to predict what type of articles one might want to read. Publishing on Medium almost guarantees your content will get seen by the targeted audience and its network effect is powerful.

How to Re-post to Medium from WordPress?

No! Copy and paste is not a solution. Medium has already make a plugin for you. Install the official Medium plugin from wordpress.org

Medium WordPress Plugin
Medium WordPress Plugin

Upon activating, you can find Medium settings on WordPress’ user profile.

Medium Settings
Medium Settings

The integration token can be found on Medium settings page. From now on, your WordPress articles will also be posted to Medium automatically.

Does Medium hurting my SEO?

Short answer: No.

Long answer: The Medium plugin adds a rel="canonical" tag pointing back to the original url. Telling search engine that the Medium post is an duplicated version of the WordPress original. See yoast’s article about canonical tag for technical details.

See it yourself. Find a cross-posted article and read its source code. There will be something like this: <link rel="canonical" href="https://you-domain.com/the-original-url">

Medium Canonical Tag
Medium Canonical Tag

Remove Cross-link Footer

Cross-link posts between this blog and Medium. When enabled adds a link to the bottom of both your local post, and the Medium post.

If you enable the cross-link option, footers will be added to the end of both Medium posts and WordPress posts.

cross link footer on medium
Cross-link Footer on Medium
cross link footer on wordpress
Cross-link Footer on WordPress

If for whatever reason you want to keep the Medium cross-link footer but remove the WordPress one, I have made a plugin for you, called Medium Remove Cross Links. It’s still under wordpress.org review. However, you can get it from the GitHub repo, or install it via WP Pusher (GitHub: TangRufus/remove-medium-cross-links). Review passed, download Remove Medium Cross Links plugin from wordpress.org.

Connect Medium with Facebook and Twitter

Make sure your Facebook friends and Twitter followers also following you on Medium. Go medium settings page and connect your Facebook and Twitter accounts. Whenever someone with Medium account follows you on twitter or become a Facebook friend of you, he will become part of your Medium network.

Connect Medium with Facebook and Twitter
Connect Medium with Facebook and Twitter

Ending…

What’s left is how you customise the Medium page layout and filling in all the description. They’re straightforward and self explanatory. If you have a Medium publication leave a comment below.

And, don’t forget to follow me on Medium @TangRufus and @TypistTech.

This article is first posted on Cross Posting WordPress to Medium without Hurting SEO

]]>
https://www.typist.tech/cross-posting-wordpress-to-medium-without-hurting-seo/feed/ 0
Local WordPress Development with Varying Vagrant Vagrants https://www.typist.tech/local-wordpress-development-varying-vagrant-vagrants/?utm_source=rss&utm_medium=rss&utm_campaign=local-wordpress-development-varying-vagrant-vagrants https://www.typist.tech/local-wordpress-development-varying-vagrant-vagrants/#comments Tue, 27 Dec 2016 04:46:45 +0000 https://www.typist.tech/?p=252 Because no developer should ever cowboy coding, it's important to have a local development WordPress environment. Varying Vagrant Vagrants lets you create and remove testing WordPress sites on local machine with ease.

This article is first posted on Local WordPress Development with Varying Vagrant Vagrants

]]>
Because no developer should ever cowboy coding, it’s important to have a local development WordPress environment. Varying Vagrant Vagrants lets you create and remove testing WordPress sites on local machine with ease.

Cowboy Coding
Cowboy Coding

Learn more about why you should have a development envirement. Watch Tom McFarlin‘s talk on The Truth About the Environment at WordCamp Atlanta 2016.

What is Varying Vagrant Vagrants?

The primary goal of Varying Vagrant Vagrants (VVV) is to provide an approachable development environment with a modern server configuration. VVV is ideal for developing themes and plugins as well as for contributing to WordPress core.
VVV Readme

Being said, VVV is a WordPress development environment on your local computer, including:

Install Varying Vagrant Vagrants

1. Vagrant and VirtualBox

Easiest way to install vagrant and virtual box is using homebrew cask.

First, make sure you have homebrew installed correctly.


$ brew doctor
Your system is ready to brew.

Then, install homebrew cask, vagrant and virtual box.


$ brew tap caskroom/cask
$ brew cask install vagrant
$ brew cask install virtualbox

2. Install Vagrant Plugins

These vagrant plugins are optional, but they do make your life easier.


$ vagrant plugin install vagrant-hostsupdater
$ vagrant plugin install vagrant-triggers
$ vagrant plugin install vagrant-vbguest

3. Clone the VVV repo

We will install the VVV repo in ~/vagrant-local
. Change it if you must.


$ git clone git://github.com/Varying-Vagrant-Vagrants/VVV.git ~/vagrant-local

4. Booting Up the VM

$ cd ~/vagrant-local
$ vagrant up

Have a coffee break! The first time boot up needs to download the whole LEMP box plus tons of development tools come with VVV. It might takes 20 minutes to complete.

5. Start Coding!

Once $ vagrant up  is done, you can start coding right away! Open http://vvv.dev/ and http://vvv.dev:1080 , you will find a dashboard containing several useful tools and the mailcatcher web interface.

Enhancing VVV

Let’s make our life even easier.

topdown/VVV-Dashboard

The default dashboard is ugly. Install VVV-Dashboard by topdown is not only prettier but more powerful.


$ cd ~/vagrant-local/www/default
$ git clone https://github.com/topdown/VVV-Dashboard.git dashboard
$ cp dashboard/dashboard-custom.php .

Go back to http://vvv.dev/ and appreciate the beauty of your new dashboard.

VVV Dashboard
VVV Dashboard

Variable VVV

VVV creates a development environment for you. Variable VVV lets you manage WordPress site creation and deletion with ease.

Install Variable VVV

$ brew install bradp/vv/vv

Create a site


$ vv create
New VVV Site Setup
 Name of new site directory: my-new-wp-site
 Blueprint to use (leave blank for none or use sample):  Blueprint to use (leave blank for none or use sample):
 Domain to use (leave blank for my-new-wp-site.dev):
 WordPress version to install (leave blank for latest version or trunk for trunk/nightly version):
 Install as multisite? (y/N):
 Git repo to clone as wp-content (leave blank to skip):
 Local SQL file to import for database (leave blank to skip):
 Remove default themes and plugins? (y/N):
 Add sample content to site (y/N):
 Enable WP_DEBUG and WP_DEBUG_LOG (y/N):

About to perform the following:
* Halt Vagrant (if running)
* Create directory my-new-wp-site in /Users/me/vagrant-local/www
* Create files vvv-init.sh, wp-cli.yml, and vvv-hosts in directory my-new-wp-site
* Create file my-new-wp-site.conf in /Users/me/vagrant-local/config/nginx-config/sites
* Run vagrant up --provision to initialize site

Provisioning Vagrant will do the following:
* Create database my-new-wp-site
* Install WordPress (release version) in the htdocs directory
* Make the site visible at my-new-wp-site.dev


 Continue (y/n)? :

With one single command $ vv create , Variable VVV asks you some basic config of the new WordPress site and then creates it for you.

Become lazier, Use Blueprints

You can use a json file to pre-define themes, plugins, widgets and menus. It works with multisite, must-use plugins, GitHub installer, etc. Checkout the blueprints section on the read me.

For Real, Start Coding on VVV!

Go to ~/vagrant-local/www/ and start coding some great!

Stay tuned. I will talk about staging environment for WordPress. Until then, take a look at:

This article is first posted on Local WordPress Development with Varying Vagrant Vagrants

]]>
https://www.typist.tech/local-wordpress-development-varying-vagrant-vagrants/feed/ 1
Fastest Social Share Buttons on WordPress https://www.typist.tech/fastest-social-share-buttons-on-wordpress/?utm_source=rss&utm_medium=rss&utm_campaign=fastest-social-share-buttons-on-wordpress https://www.typist.tech/fastest-social-share-buttons-on-wordpress/#respond Tue, 27 Dec 2016 01:46:45 +0000 https://www.typist.tech/?p=201 By no doubt putting a nice set of eye-catching social share buttons on your pages is the first step to seduce visitors to share your content. Negligible difference when benchmarking WP Font Awesome Share Icons plugin. Making it the fastest social share WordPress plugin I ever seen.

This article is first posted on Fastest Social Share Buttons on WordPress

]]>
By no doubt putting a nice set of eye-catching social share buttons on your pages is the first step to seduce visitors to share your content. There are thousands of share button plugins on the WordPress plugins repository makes choosing the right one become difficult than ever.

Share Buttons WordPress Plugins Search Result
Share Buttons WordPress Plugins Search Result

The Requirement

Responsive Social Share Buttons

According to We Are Social, mobile traffic increased by 39% from 2014 to 2015 with one-third of all web pages now visited on mobile devices.

Mobile-friendly share buttons are no longer optional!Click To Tweet

Fast Social Share Buttons

Page load speed is of utmost importance for any respectable website. We should not tolerate any delay because of rendering the social share buttons. Lots of social share buttons plugins enqueue one javascript and one css files for each social network. Dramatically increase page load time for that simple buttons.

WP Font Awesome Share Icons

WP Font Awesome Share Icons
WP Font Awesome Share Icons

Here comes our weapon of choice WP Font Awesome Share Icons available on WordPress.org for free. Supporting 16 different networks:

  • Facebook
  • Twitter
  • Google Plus
  • Linkedin
  • Pinterest
  • Tumblr
  • VKontakte
  • StumbleUpon
  • Delicious
  • Digg
  • Xing
  • Weibo
  • Renren
  • SpecificFeeds
  • Email
  • W3C Validation Link
WP Font Awesome Share Icons Buttons
WP Font Awesome Share Icons Buttons

More Features

  • Drag-n-drop ordering
  • Easy enabling or disabling
  • Square, Circle (round) or Simple icons.
  • Multiple sizes out-of-the-box
  • It will not re-load Font Awesome if it is already loaded and detected
  • Many options about where to display the icons
  • Option to open in new window, so users will not go away from your site
  • Shortcode is included to enter on posts/pages etc
  • PHP Function is included to enter it on your theme

Performance

WP Font Awesome Share Icons, as the name suggests, depends on the font awesome library. Lots of themes have already intergraded font awesome. Thus, WP Font Awesome Share Icons has an option to skip enqueuing its css to prevent duplication and waste of bandwidth.

WP Font Awesome Share Icons Settings
WP Font Awesome Share Icons Settings

Another big win, if you turn off WP Font Awesome Share Icons’ open in new window and share counter functions, no javascript file is added.

Digging into the source code, the render function is no more than getting options and string interpolations.


$output .= '<li class="wpfai-list-item '. $icon .'">
 <a href="'. str_replace($find, $replace, $wpfai_socialmedia[$icon]['link']) .'" title="'. $wpfai_socialmedia[$icon]['name'] .'" class="wpfai-'. $icon .' wpfai-link'. ($wpfai_popup == 'yes' ? ' wpfainw' : '') .'">
 <span class="fa-stack '. ($regsize != '' ? 'fa-'. $regsize : '') .'">
 '. ($regshape != 'simple' ? '<i class="fa fa-'. $regshape .''. ($reginverse == 'yes' || (( $reginverse == 'no' && $regshape == 'circle-thin') ) ? '' : '-o') .' fa-stack-2x"></i>': '') .'
 <i class="fa fa-'. $icon .' fa-stack-1x '. ($reginverse == 'yes' ? 'fa-inverse' : '') .'"></i>
 </span>'. ($share_count >= $wpfai_counter_minimum && $share_count !== false ? '<div class="counter">' . $share_count . '</div>' : '') .'
 </a>
 </li>';

With open in new window and counter functions disabled, and using my theme’s font awesome library, only one css file is added.Negligible difference when benchmarking WP Font Awesome Share Icons plugin. Making it the fastest social share WordPress plugin I ever seen.

WP Font Awesome Share Icons adds no delay. Making it the fastest social share WordPress pluginClick To Tweet

Bottom Line

If you just need basic, responsive, fast social share buttons, go for WP Font Awesome Share Icons. It has nearly no effects on page load speed.

What if I need more?

Checkout Monarch (Elegant Themes) and Social Warfare. They provide more advance display options and analytics functions.

This article is first posted on Fastest Social Share Buttons on WordPress

]]>
https://www.typist.tech/fastest-social-share-buttons-on-wordpress/feed/ 0
Hosting WordPress on Heroku? Think Again! https://www.typist.tech/hosting-wordpress-on-heroku-think-again/?utm_source=rss&utm_medium=rss&utm_campaign=hosting-wordpress-on-heroku-think-again https://www.typist.tech/hosting-wordpress-on-heroku-think-again/#comments Mon, 26 Dec 2016 19:05:35 +0000 https://www.typist.tech/?p=174 Ever think about hosting WordPress sites on Heroku? Think again. It's not as easy as deploying Rails applications. In fact, it's a headache. Besides the limits you find in the official document, I am showing you some of my thoughts on Heroku WordPress hosting.

This article is first posted on Hosting WordPress on Heroku? Think Again!

]]>
Ever think about hosting WordPress sites on Heroku? Think again. It’s not as easy as deploying Rails applications. In fact, it’s a headache. Besides the limits you find in the official document, I am showing you some of my thoughts on Heroku WordPress hosting.

Heroku’s Ephemeral Filesystem

Each dyno(Heroku’s term on its servers) gets its own ephemeral file system. When you uploaded an image, the image is stored on one of the dyno only. The images will be erased after dyno restart. Worse still, Dynos crash if you try to write to its file systems.

Here comes the solution: Offload media files to Amazon S3Delicious Brains have written an excellent plugin for hooking S3 into WordPress’ media library seamlessly.

Besides, you need to stop editing the source code from WP admin. Add these two lines into wp-config.php


define( 'DISALLOW_FILE_EDIT', false );
define( 'DISALLOW_FILE_MODS', false );

Also, auto WordPress core / theme / plugin updates should be disabled. This handy plugin does the job. Managing the updates by Git or Dropbox is necessary.

Moreover, the ephemeral filesystem might break your caching and minifying plugins. You have to Batcache with the Memcachier add-on, or plugins that write to an external server.

Heroku doesn’t Send Emails

To send emails from Heroku dyno, you must use a SMTP service as Mandrill or SendGrid. Both of them provide similar feature sets and official WordPress plugins (wpMandrill and SendGrid). Just pick one and stick to it.

If you prefer a lightweight solution than the official plugins. You can config WordPress to use the SMTP service in less than 10 lines.


add_action( 'phpmailer_init', 'wph_phpmailer_init' );
function wph_phpmailer_init( PHPMailer $phpmailer ) {
	$phpmailer->IsSMTP();
	$phpmailer->SMTPAuth = true; // enable SMTP authentication
	$phpmailer->Port = 587; // set the SMTP server port
	$phpmailer->Host = 'smtp.mandrillapp.com'; // SMTP server
	$phpmailer->Username = 'MANDRILL_USERNAME'; // SMTP server username
	$phpmailer->Password = 'MANDRILL_API_KEY'; // SMTP server password
}

Default Builtpack Sucks

Unlike installing LEMP on VPS, every time you deploy new code, Heroku compile all dynos from scratch. The collection of shell scripts to run on every dyno boot-ups called a buildpack.

Heroku provides a default PHP builtpack. Although the default one gives you Apache, Nginx, PHP FPM and HHVM, it is not optimized for WordPress.

Making a custom buildpack isn’t a easy task. You can’t SSH into the dynos. Every changes on buildpacks’ source code takes a long time to re-compile.

Deploy WordPress to Heroku in < 60 seconds or your money back

— Marc Chung

No worries. If you really have to, Marc Chung and Matt Hoofman have 2 different buildpacks ready for you. Be sure to read their READMEs. They comes with some assumptions, such as file structures, pre-installed plugins, even database selections. Reminder: You should fork and modify the buildpacks to update everything.

Heroku doesn’t Provide MySQL

Unlike setting LEMP up on VPS, the database isn’t installed on the dynos. Heroku Postgres, ClearDB and Amazon RDS suit your needs.

Heroku Postgres which is the SQL database service run by Heroku. First 10k rows are free. Comes with free auto backup service. However, you must have PostgreSQL for WordPress (PG4WP) installed to rewrite MySQL specific queries to generic ones on the fly when needed.

WordPress with PG4WP is expected to be slower than the original WordPress with MySQL because PG4WP does much SQL rewriting for any page view

PG4WP Description

If you prefer to stay with the WordPress default database engine, ClearDB is the only MySQL database service available on Heroku add-on marketplace.  Free plan provides 5MB database size. Barely enough for testing.

Beyond the Heroku add-on marketplace, my choice is Amazon RDS. Extra steps to set up. However, free tier gives you a micro instance with 20GB storage.

Heroku Speeded Up WordPress

Moving to Heroku from DigitalOcean did speed up my site by around 13%. Note that this is not a scientific comparison.

Before (on DigitalOcean):

WordPress on DigitalOcean Speed Test
WordPress on DigitalOcean Speed Test

After (on Heroku):

WordPress on Heroku Speed Test
WordPress on Heroku Speed Test

Marc Chung also have some benchmarks on his WordPress buildpack. Page loads within a second. In his word:

How fast is this? Pretty freaking fast.

— Marc Chung

Heroku does No Auto-scaling

It is common to think a cloud hosting service like Heroku would provide native support on auto-scaling. Sadly, it is not the case. It can’t do load-base auto-scaling like Amazon does.

Luckily, Adept Scale add-on gives you some power over auto-scaling.

Mobile App

Although Heroku haven’t release an official mobile app, Nezumi lets you manage Heroku apps on the go It does capable of scaling dyno sizes.

Yes! The top reason you want a mobile app for Heroku.

Cost Goes Up Quickly

Keep in mind that you want more than one dyno. Heroku restart dynos at least once per day even though the dynos are healthy. Thus, single dyno apps are guaranteed to have downtime daily.

Heroku gives you a 1x dyno (512MB ram) for free. Then, $7 monthly for a never sleep hobby dyno. Standard dynos start with $25 monthly.

Do consider the add-on costs before migrating to Heroku. The costs of database (ClearDB), memcached (Memcachier), logging (Papertrail), monitoring (New Relic) add-ons rocket up along with your dyno size.

Bottom Line: Do I Recommend Heroku for WordPress Hosting?

Unfortunately, not at this moment. In fact, I moved out of Heroku to Amazon OpsWork after 2 weeks. Back to DigitalOcean now.

Heroku is great for prototyping Rails apps. (I still using Heroku on my rails projects) But, for WordPress sites? No, a big no.Click To Tweet

This article is first posted on Hosting WordPress on Heroku? Think Again!

]]>
https://www.typist.tech/hosting-wordpress-on-heroku-think-again/feed/ 1