Quick Local WordPress Setup with Valet

Often you just want to do a quick WordPress setup locally on your Mac for trying something out. I always do a quick local WordPress setup with Valet. Laravel Valet is an application that is created by the developers behind Laravel. It can be used to run all sorts of apps and WordPress is one of them. Thanks to the Evan Mattson’s CLI Valet Command package you can use Valet to create WordPress sites with a single command.

Prerequisites

So what do you need? You need to setup Laravel Valet and for that you need Homebrew (MacOs package manager) including PHP and MariaDB. You also need Composer to install the Laravel Valet package itself.. Let’s go through settings all these up.

Homebrew

So what do you need? You need to setup Laravel Valet and for that you need Homebrew (MacOs package manager). So install Homebrew using:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Homebrew Packages

Then you need to install PHP 7.2 (currently).

brew install homebrew/php/php72

And you also need to install MariaDB

brew install mariadb

Composer & Laravel Valet

Then you can install Laravel Valet with composer. Most of you using Laravel should have it already, but just in case. To install Composer do the following in a directory of your choice

php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php -r "if (hash_file('SHA384', 'composer-setup.php') === '544e09ee996cdf60ece3804abc52599c22b1f40f4323403c44d44fdfdd586475ca9813a858088ffbc1f233e9b180f061') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
php composer-setup.php
php -r "unlink('composer-setup.php');"

Next step is to install the composer package for Laravel Valet

composer global require laravel/valet

WP CLI & WP CLI Valet

You should have WordPress Command Line Interface installed too. You can read about it here. But on top of that you need to install the WP Valet package. This package does all the magic of using the coolness of Laravel Valet and WP CLI. You can do the installation using this wp command:

wp package install git@github.com:aaemnnosttv/wp-cli-valet-command.git

That will get you going.

WordPress Website Installation

Once that is done you can install WordPress using Valet and Bedrock as a setup using:

wp valet new my-project --project=bedrock

Bonus: Local Site Copy

So what if you quickly want to set up an existing website? This so you can make changes for your client? There are many options. You could do a general WordPress Valet setup, replace the database and add the wp-content directory. That would do the trick. You could also do a general Valet WordPress setup and than do a BackupBuddy restore.

To start a new project as a base you simply run:

wp valet new my-project --project=wp

Then inside the newly created directory my-project run

valet link new-project

Using valet links you can check if it was created, but of course also by surfing to https:/my-project.test. You can then login at https://my-project.test/wp-login.php with username admin and password admin.

Local Restore

Now let’s say I want to go the BackupBuddy restore way. How do I proceed? I install the BackupBuddy plugin and import the backup using the backup file and the import file. Issue is that BackupBuddy refuses to run backups or restores due to errors with wp-cron and others.

Error: Error #9038: Loopback test error: cURL error 6: Could not resolve: site.test (Domain name not found). URL: https://site.test/wp-admin/admin-ajax.php?action=itbub_http_loop_back_test&serial=96ytxigaj612suq. If you need to contact your web host, tell them that when PHP tries to connect back to the site at the URL https://site.test/wp-admin/admin-ajax.php?action=itbub_http_loop_back_test&serial=96ytxigaj612suq via curl (or other fallback connection method built into WordPress) that it gets the error cURL error 6: Could not resolve: site.test (Domain name not found). This means that WordPress' built-in simulated cron system cannot function properly, breaking some WordPress features & subsequently some plugins. There may be a problem with the server configuration (eg local DNS problems, mod_security, etc) preventing connections from working properly.

We do have 1024MB as a memory limit already at /usr/local/etc/php/7.3/conf.d/php-memory-limits.ini and we also made execution time 120 instead of 30 at /usr/local/etc/php/7.3/php.ini

But with or without SSL we still got stuck updating via BackupBuddy’s interface. So what you can better do is replace wp-content and import the database as a whole. We imported with WP Database Backup.

WP Database Backup

We did however had to re-create the database and using utf8mb4. Basic WP Valet database setup caused the import to fail and even using different import settings than Greek Windows did not help. Still got stuck at

[ERROR in query 1] You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near 'PK   ' at line 1 [ERROR in query 2] You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near '??4?A?? ??G?ж??O ?????? ? fW??n?,?m??e?x? ? ?

With new database under the same name we could import. Warning shots were fired and a database update was needed by WordPress but things did work in the end. That and with home url and site url changed to work with .test . Of course image would still load remote site images, but for local code tweaks that did not matter.

NextGen Gallery Custom Field Rotating Images

NextGen Gallery Custom Field Rotating Images was created by us about 5 years ago for Ultimate Fiji Vacations. Since then the NextGen gallery has gone through some major changes. It has been taken over by Imagely and it has had some major upgrades.

Shortcode Changes

Some of these NextGen Gallery plugin changes were also shortcode changes. And these caused a not loading or not loading of some galleries (old post on setup) of a client of ours. We had to dig deep into the code changes to figure out what to do. We realized templates were loaded differently and that also the shortcode to load a gallery had changed. It now calles source and container_ids to load a gallery with images properly. The code

$gal = apply_filters('the_content', '[nggallery id='.$gal.' ' . $nggtemplate. ']' );
is therefore no longer applicable.

Full Code

Here is the full code to now load the gallery based on custom post type ID:
/* NG Gallery Custom Field Rotating Images */ 
$gallery = get_post_meta($post->ID, 'Gallery ID Number', true); 
$gal = $gallery; 
if( !empty($gal) ) { 
$gal = apply_filters('the_content', '[ngg_images source="galleries" container_ids=' .$gal.' display_type="photocrati-nextgen_basic_imagebrowser"]');
echo $gal;
}

As you can see the source=”” has been added and we removed the old fashioned way loading of the template as it no longer worked.

Template Loading

As the template is no longer loaded the old fashioned way and as this code allowed it to be loaded right away we decided do ditch loading a template by absolute path like so:

template="/home/user/domain.com/wp-content/plugins/nextgen-gallery/products/photocrati_nextgen/modules/ngglegacy/view/imagebrowser.php"

Instead we added the necessary JavaScript for the styling in the code where the slider was generated. This saved us the loading of another file and worked just as well!

Hostnet.nl MainWP Issues

Been having Hostnet.nl MainWP Issues lately. The MainWP Dashboard cannot connect to the child theme. Never been happy with hostnet really as they throttle RAM all the time. This causes issues doing BackupBuddy backups and even issues with Wordfence.

MainWP – Hostnet Connection Severed

But now for two months I have not been able to connect the dashboard to the child theme. I tried:

  • deactivating and activating the MainWP Child theme,
  • reconnecting multiple times, no joy

HTTP Error

I keep on getting

ERROR: HTTP error - Connection timed out after 10001 milliseconds

errors. Funnily the error nor access logs in the hostnet.nl control panel showed me little:

[Wed Feb 21 03:50:08 2018] [error] [client 216.244.66.250] cgid daemon is gone; is Apache terminating?: /usr/bin/php-cgi
[Wed Feb 21 05:20:37 2018] [error] [client 193.106.30.99] ap_pass_brigade failed with error 103: Software caused connection abort

The app_pass_bridge can be fixed by raising the PHP_FCGI_MAX_REQUESTS limit or limiting the FcgidMaxRequestsPerProcess to 500 – SO url. And frankly I am not sure if that is related to MainWP knocking on the server’s door.

SSL Errors

Then we checked the SSL error logs and found:

[Wed Feb 21 17:33:15 2018] [error] [client 141.135.85.55] ap_pass_brigade failed with error 103: Software caused connection abort, referer: https://domain.nl/en/author/author/
[Wed Feb 21 17:33:17 2018] [error] [client 141.135.85.55] ap_pass_brigade failed with error 103: Software caused connection abort, referer: https://domain.nl/en/author/domain/
[Wed Feb 21 17:33:18 2018] [error] [client 141.135.85.55] ap_pass_brigade failed with error 103: Software caused connection abort, referer: https://domain.nl/en/author/author/
[Wed Feb 21 17:33:19 2018] [error] [client 141.135.85.55] ap_pass_brigade failed with error 103: Software caused connection abort, referer: https://domain.nl/en/author/author/
[Wed Feb 21 18:28:13 2018] [error] [client 85.144.168.68] Premature end of script headers: php-cgi, referer: https://domain.nl/kamers/
[Wed Feb 21 19:08:42 2018] [error] [client 207.46.13.176] cgid daemon is gone; is Apache terminating?: /usr/bin/php-cgi
[Wed Feb 21 22:41:30 2018] [error] [client 81.206.1.201] cgid daemon is gone; is Apache terminating?: /usr/bin/php-cgi
[Thu Feb 22 01:07:16 2018] [error] [client 84.107.148.60] ap_pass_brigade failed with error 103: Software caused connection abort, referer: https://domain.nl/wp-content/themes/cosily-child/style.css?ver=a35f4bf8ee43d6c4ef1d7ba1ab5faaa4

More errors there, but nothing again on the immediate connectivity issues, but a strong indicator on server errors as ap_pass_brigade errors popup a lot.

PHP_FCGI_MAX_REQUESTS or RAM

What I mainly read upon it is that it is either an issue I can solve by raising RAM or by increasing PHP FCGI MAX REQUESTS. I opened a ticket with Hostnet.nl on it.

WP CLI Installation of WordPress

To do a WP CLI Installation of WordPress on a server where WordPress Command Line Interface is installed is quite easy. Let me explain here how you can get WordPress installed with it in no time.

WP CLI Installation

To install WP CLI itself do a

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
chmod +x wp-cli.phar 
sudo mv wp-cli.phar /usr/local/bin/wp

then do a wp –info to see that it works.

WP Core Installation Parameters

You just need to log into the server via shell using ssh user@domain.com. Then you go to the web root or directory where your site should reside. There you run the command wp core with the following parameters:

wp core install --url=staging.domain.com --title=Staging --admin_user=uberlord --admin_password=toughpassword --admin_email=jasper@staging.domain.com

This will make wp-cli install WordPress for you with:

  • url – domain where the site will be served from
  • title – site’s Title
  • admin_user – admin’s username
  • admin_password – the administrator’s password
  • admin_email – the email address of the administrator

WP CLI Automation

Once you have started the command it will download the latest WordPress version, install it using the parameters you fed it.

Alternatives

I also wrote about installing WordPress from the command line before without any tool. This works just fine too. But these days I prefer Laravel Valet or WP CLI. These tools are just too nice to live without.

WooCommerce and Gutenberg – Great stuff ahead!

WooCommerce and Gutenberg.. What will happen when Gutenberg Editor gets introduced to your WooCommerce site in WordPress 5.0? Will it be Armageddon and will all product fields below the description and title field break? Do you need to deactivate Gutenberg just to keep your ecommerce business up and running?

What is Gutenberg?

Gutenberg is the new WordPress Editor. We wrote about it before at the beginning of this year actually. It will allow you to create content for posts, pages and custom post types just like WooCommerce Products using blocks. Here is a screenshot of what you see looking for blocks:

Gutenberg Blocks

 

And here one with some text added:

Text Block

Think of it as some of the Page Builders out there like Visual Composer, Beaver Builder or Divi. What is more, it will also make these options available in the customizer and perhaps frontend in the future as well.

Custom Fields and Gutenberg

As all is still under development it tends to be foggy sometimes and a lot of developers and end users are freaking out about it as it might break the way meta boxes / custom fields are used now. WooCommerce relies heavily on custom fields to add product data. And these fields may not work properly, or be moved to the new sidebar and so on. When you currently run the Gutenberg plugin to check you see it in action on a product page the WooCommerce custom fields are below it.

WooCommerce Custom Fields

But it is going to be way more integrated. Either they will be show below the block in a different way, go to the sidebar or they are going to come up with another solution.

Product Blocks

I am all for it and the sneak preview WooCommerce has shown looks very promising. And WooCommerce is working on product blocks already in their repo using a separate branch (code to be merged once done).

I installed the product blocks branch on my local WooCommerce Gutenberg Laravel Valet site and I can already see we can add a product block with ease inside a post:

Product Search Inside Woo Block

I just cannot search for my existing dummy products yet.  There seems to be a 404 issue

https://woo-guteberg.dev/index.php?rest_route=/wc/v2/products/?search=v

Here the no products found message:

Product Block Search

So I can’t go and add a product yet, but I can see we are closer than I thought and that is nice to see.

It is work in progress and perhaps my setup needs some REST API changes..? But the WooCommerce REST API is turned on though..

WooCommerce REST API

 

Well, that is something to try another time. Just like add products in x numbers and columns as Woo demoed. That I seem to not be able to do with this test branch yet.

The Future of WooCommerce with Gutenberg

I must say I am really exciting. I always found most page builder lacking a lot. Especially in the WooCommerce field. I want to be able to change the product page layout around. I want to be able to decide where the

  • product gallery,
  • description
  • cart button,
  • price and
  • other tabs with data

 

will be added. And I am positive that we will. Do see great options for the category or shop page in progress already. Rows and columns can be decided and hopefully thumbnail sizes in the future too. As for product page changes, well I expect to be able to move the mentioned elements around and WooCommerce did mention these as possibilities as well.

I expect to see way more in the upcoming weeks and months! Can’t say I am too worried. Big changes yes, but changes for the better to keep WordPress ahead of the game and compete with the likes of Shopify and Magento. And for WordPress to show others like Wix, Squarespace, Weebly and so on who’s boss. Exciting times!

Trellis Server FTP Credentials requested by WordPress

Just today WordPress asked me to enter FTP Credetials to proceed after I adjusted an image using the Jupiter interface for header images. This had never happened before on any Trellis setup of mine.

FTP Credentials Needed

The full error message was on a very basic page with the fields to enter the ftp user and password:

Connection Information

To perform the requested action, WordPress needs to access your web server. Please enter your FTP credentials to proceed. If you do not remember your credentials, you should contact your web host.

Hostname
 example: www.wordpress.org
 FTP Username
 members_publiqly
 FTP Password
 •••••••••••••••••••••••••
 This password will not be stored on the server.

And the error came when I tried to update the post or save it. Normally data is just stored in the database so I failed to understand why the FTP credentials were requested in the first place. But apparently the file being run also suffers from this. And so there must be a permission issue.

WordPress Admin Rights

We do allow admins to install plugins on the server and as Ben mentioned at Roots discourse once again that is not recommended. But hey, we needed this working with multiple team members not familiar with tools such as Git, Composer, WP-CLI and the likes. So although I would have preferred to manage the plugins with composer it was simply not possible with this projects.

Error Logs

So decided to check the logs for clues on the need for FTP. The error log showed

PHP message: PHP Warning: Cannot modify header information - headers already sent by (output started at /srv/www/sub.domain.com/releases/20171017052436/web/wp/wp-admin/includes/file.php:1678) in /srv/www/sub.domain.com/releases/20171017052436/web/wp/wp-admin/post.php on line 198
PHP message: PHP Warning: Cannot modify header information - headers already sent by (output started at /srv/www/sub.domain.com/releases/20171017052436/web/wp/wp-admin/includes/file.php:1678) in /srv/www/sub.domain.com/releases/20171017052436/web/wp/wp-includes/pluggable.php on line 1216" while reading upstream, client: 77.69.163.237, server:sub.domain.com, request: "POST /wp/wp-admin/post.php HTTP/2.0", upstream: "fastcgi://unix:/var/run/php-fpm-wordpress.sock:", host: "sub.domain.com", referrer: "https://sub.domain.com/wp/wp-admin/post.php?post=483&action=edit"

Based in this I checked this WordPress core files for anomalies. I found:

 // Session cookie flag that the post was saved
 if ( isset( $_COOKIE['wp-saving-post'] ) && $_COOKIE['wp-saving-post'] === $post_id . '-check' ) {
 setcookie( 'wp-saving-post', $post_id . '-saved', time() + DAY_IN_SECONDS, ADMIN_COOKIE_PATH, COOKIE_DOMAIN, is_ssl() );
 }

in post.php. In Pluggable line 1216 showed:

if ( !$is_IIS && PHP_SAPI != 'cgi-fcgi' )
 status_header($status); // This causes problems on IIS and some FastCGI setups
header("Location: $location", true, $status);
return true;

Session Issue

And so that seemed to be related to a session issue on saving of the post. Which is correct. Not a whitespace issue that should not be there as is sometimes the case. So I started to wonder. I did do a server update while working so perhaps the session got messy. I logged of and on, tried saving the same post again and things were fine. I also checked rights and permissions for the /srv/www/sub.domain.com/current/web/app/ and did not see something odd really. So perhaps it was just a session issue due to the server update I did doing a 

unattended-upgrades -d

Should have probably not have done these two things at the same time!

Reinstallation Latest WordPress Version

Issue continued however. Once I made a header change the second time and saved the issue returned. So then I decided to reinstall WordPress as it seemed the issue was pointing to WordPress Core files and I could still not find issues with the files it got stuck at. Did not work either

Image Replacement

The image used in the header was an image loaded from the main domain on the same server so thought that may be the issue and uploaded on on the subdomain media manager itself. Did did not seem to be the issue though as the issue remained.

FS METHOD Direct

So I decided to upload the theme once again as it was updated recently and that may be the issue. After I overwrote all theme files things seem to be working. But only when I added a line to application.php for direct FS method*.

/**
* Custom Settings
*/
define('AUTOMATIC_UPDATER_DISABLED', true);
define('DISABLE_WP_CRON', env('DISABLE_WP_CRON') ?: false);
define('DISALLOW_FILE_EDIT', true);
define('FS_METHOD', 'direct');

*(Primary Preference) “direct” forces it to use Direct File I/O requests from within PHP. It is the option chosen by default.

The extra define(‘FS_METHOD’, ‘direct’); in application.php seemed to do the trick.

This makes us think there has been a Jupiter change that requires file manipulation that somehow does not work properly with other methods besides direct file I/O requests. But we have not figured it out yet. Seems unlikely now that this is a file or directory permission issue. Otherwise we would have had other issues and error messages.

Imagewize Migration – WordPress Migration Case Study

We just finally did it. The Imagewize Migration is a fact! Imagewize has become IMWZ starting today. We have been thinking about a rebranding for quite some time, but we are finally taking steps. Today we migrated https://imagewize.com to https://wpvilla.in. And I must say it went pretty smoothly. Let us tell you how we did the WordPress Migration so you can learn from this.

Background

You must know that we moved to DreamPress, Managed WordPress hosting with Dreamhost. It is an amazing setup to run your WordPress business and I will highlight features ast the end of this post. There was one issue we bumped into as was due to WP Rocket DreamPress compatibility issues with DreamPress. This as the latter works with Varnish caching. So this is something you may no run into, but the rest is very similar to most WordPress migrations.

BackupBuddy Backup

We used BackupBuddy to backup the site and migrate it from the Dashboard to the new location. That saved us time using SFTP to SFTP everything to our local PC and then again to the new location. Both locations are in the US and from Bahrain using my meager Batelco ADSL here at Amwaj Islands would have been a massive PITA.

Wordfence Firewall Issues

We did run into one issue with Wordfence. We blogged about the fact that BackupBuddy and Wordfence do not like each other much before. It spoiled the database migration completely. As soon as the necessary files were unzipped we had a JSON error. One I could not just copy as it was in a BackupBuddy warning backup:

Error #839983: Failure parsing returned server data. SEe Status log for more details: `Unexpected token < in JSON at position 0`.
Resonse: `<br />
<b>Warning</b>: Unknown:Failed to open stream. Permission denied in
<b>Unknown<b/> on line <b>0</b><br />
<b>Fatal error</b>: Unknown: Failed opening required '/home/imgvps/imagewize.com/wordfence-waf.php'

There was an error because Wordfence was trying to load wordfence-waf.php from old server. Had to deactivate and remove Wordfence, empty cache before I could rename the file. Not sure if plugin removal was needed though, but did anyways. Just renaming wordfence-waf.php or .user.ini did not do the trick. Could have been a caching issue though. But hey, I would recommend removing Wordfence before you move. Or you will get stuck just like me.

301 Redirect from old to new domain

All our visitors and clients trying to reach us at the old website will be properly redirected to the new domain name. This we did with a fairly standard Apache redirect at the top of the .htaccess file:

#Options +FollowSymLinks
 RewriteEngine on
 RewriteRule ^(.*)$ https://.wpvilla.in/$1 [R=301,L]

As we only change the domain and not the permalinks the redirect RewriteRule was pretty straightforward. We will remove the site at the old domain as soon as we can. Will also allow us to reduce the VPS intake of RAM and save us some $.

The new problem I faced was this: we were redirecting the old site because we changed our name (and with it, our domain). While we’ve tried to let all our existing customers know about the name change, we still want to redirect the old site to a specific page of the new site designed to let them know that we are still the same people doing the same thing (so they would not think we had been acquired or otherwise changed).

Feedback Reader

Feedback from read of this post Bill Weber @ https://growthpilot.com/ on a related redirect issue I decided to add here for now. If I do find another post it was more about I will move this piece to that post.

With the code you provide in your post, it redirected perfectly to the page we wanted IF you tried to access the primary .com home page of the old site, but redirected to the home page (rather than the desired page) of the new site if they tried any other link on the old site.

After another hour or so of fruitless searching, I finally figured out that I simply needed to remove the trailing “$1” in the last line of your code to get the behavior I was looking for: all pages on the old domain forwarding to a single page (not the home page) on the new domain.

The very slight modification I did to what you provided is below:

RewriteEngine On
RewriteCond %{REQUEST_URI} !^(.)?wp-login.php(.)$
RewriteCond %{REQUEST_URI} !^/wp-admin
RewriteRule ^(.*)$ https://newsite.com/desired-landing-page/ [R=301,L]

Google Webmaster Tools Change of Address

You can also tell Google that you have moved. For the property that has changed address you can register just that. Click on the top right button to register the change.

Change of address

After that you can follow the steps below and:

  • pick the new domain,
  • confirm the 301 redirects properly
  • check that the verification code still works properly
Webmaster Tools Change of address Steps

Google Analytics Property & View Changes

Do not forget to update your Google Analytics property and view settings. These need to use the new url as well. Otherwise you will see a quick drop in traffic post domain name migration. We did it by going to the Google Analytics account in question. There under admin you can change the url for the property and for the view(s) you have.

property url

Google Analytics Filters Check

Please be certain to change your filters if you have additional views with filters like a valid hostname filter. Otherwise it will not register any visitors as it will not accept the new domain name. We now have:

imwz\.io|cdn\.imagewize\.com

but had the first filter hostname as imagewize.com and had not adjusted it right away. Fortunately we have multiple views so we still had data, but lost some for this spam free view. The second allowed host is for our CDN. We may adjust the name there, but we will keep it for now.

WP Rocket Compatibility

To make WP Rocket Cache work properly with DreamPress Varnish we did need to activate a separate plugin provided by WP Rocket. This plugin had to be added to

  • be able to empty Varnish cache on emptying cache using WP Rocket,
  • remove Varnish removal as an option as it is no longer needed,
  • ensure minification compatibility and
  • remove the HTML expires rules from .htaccess

DreamPress Goodies

The additional advantage we have now is that we were now part of a Dreamhost one-click installation. So we were able to move over to DreamPress. It is really amazing. It allows you to focus on your site and let them manage core updates, server updates. And this with a setup with one server for files, one for the database and one for Varnish caching.

Design Changes

We will be replacing the logo and favicon this week. Just some final tweaking to do so to speak. The weekend was good for a migration so we went for it. We promise you will see a new shiny logo and favicon soon. This besides the new icons for social media. The Facebook Page has been renamed already, but will get a facelift too as soon as the design part is done.

Backing up WordPress from the Command Line

We often have to back up our website and we do not always want to use plugins or control panel options to do this. Often using the command line is a lot easier and quicker. With the help of your terminal you can ssh into your website and fire a few simple commands to backup your WordPress website files and database. I did write about all this briefly before here, but this post is more detailed and includes database backup examples too.

Backing up files

To backup your files you can use tar. Here is the command I use to backup all and exclude the BackupBuddy backups which I don’t need and which tend to take up way too much space.

tar cvzf  domain.nl-16-06-2017.tar.gz domain.nl --exclude=domain.nl/wp-content/uploads/backupbuddy_backups

Tar starts out details on what should be done, then indicates your destination and finally the source directory. So I first tell tar to:

  • (c)ompress
  • use (v)erbose out
  • use (g)unzip
  • and all this done on the (f)ile

Then I tell the destination domain.nl-16-06-2017.tar.gz which I tend to call domain.com-day=month-year.tar.gz. And then finally I tell it to grab all from directory domain.nl and exclude all my backupbuddy backups using the exclude command. If I would have added those the backup would have been several 100 MB larger than without! And as I often just want to backup and SFTP to my home box or another server I prefer to keep the backup as small as possible.

Database Backup

We have not backed up the database yet, which is also very important. To do that I use:

mysqldump --opt --user=user --password=password --host=mysql-site.domain.com databasename > domain.com-dd-mm-yy.sql

Afterwards you can tar the whole file to make it smaller too. See above tar command for that.

WP-CLI Database Backup

Now, if you have wp-cli available or can get it installed you can use it for backing up as well. This command will backup the file in the root of your WordPress website:

wp db export

Now you do have to make sure you are in the WordPress project root. Especially if you like me have multiple WordPress installations. Too, using this command creates the file in the same directory with no specifics in the file name. You may prefer to use something like:

wp db export domain.com_db-dd-mm-yy.sql

 

Awesome WordPress Frontend Editor Gutenberg in Progress

WordPress Frontend Editor Gutenberg is in progress and is looking better day by day. You can play with the demo here: https://wordpress.github.io/gutenberg/ and report bugs or feature requests at the repo here https://github.com/WordPress/gutenberg .

Gutenberg Elements

It is still rather basic, but you can drag and drop re-order blocks, align images or text and some other basic things. See screenshot here below:

Gutenberg Options

As you can see we have:

  • paragraphs
  • headings
  • images
  • quotes
  • unordered lists
  • lists

Headings

Aligning of existing headings works fine. Adding new ones like any other elements cannot be done yet. Nor do I see the option to pick other headings or changing the font size or family. Editing the contents of the existing header seems to work fine. And when you edit the text you are offered the option to make the text bold, italic, underlined or make a link

text styling

Paragraphs

Editing existing paragraphs is possible, but when you click on the plus icon to add another one that does not work. It seem that adding elements is just not possible yet. Perhaps blocked or just not possible yet. I have not tried it on a development environment yet though.

editing paragraphs

Images

Did try to add another image and or remove an existing one, but that does not seem to work yet. So I filed a ticket for this issue. Aligning the image works just fine though.

Editing Images

Quotes and Lists

Quotes and lists have not been added yet so I could not play with them yet.

Blocks

We are supposed to be able to put blocks next to each other like you can using Elementor, Beaver Builder or Visual Composer as well. But that does not seem to be working at the moment. But I guess this being all beta we just have to wait.

First Impressions

Will do some local testing at a later stage. So far is seems that quite a few things do not work yet. So you can only test existing block or elements and you cannot put things into two columns yet. You also cannot add new content blocks. Again, I have not tested locally so perhaps more works in my own environment. When I have done testing there I will update this post or write a follow-up. But overall I love the design and initial functionality!

How to add Leadpages Form to WordPress Menu

Sometimes you need to add custom code to your menu. You need a custom menu item that basically is just some html code. You don’t want another sidebar and widget, you just want to add some text. You need to add some Leadpages html code to display a button to opt-in maybe? How to add Leadpages Form to WordPress Menu?

Best Approach

Well, after some research and a lot of help form WP Explorer I realized it is not that hard. When the AWeber embed code is styled OK with inline styles or your own external styles in your CSS stylesheet you can add an extra menu item – being just some html code – with relative ease. And, no, you won’t be needing a plugin for it. I tried Widgets in Menu by Yapapaya before though. But it did not give me the flexibility to order items properly. Fortunately, you can just add some code – read filter –  to the functions.php file of your child theme.

wp_nav_menu_items Filter

There is a a great filter that allows you to add a menu item to your WordPress generated menu. It is wp_nav_menu_items . With it you can indicate for what menu position you would like to add a new item and you can give it the right priority. This way you can decide its position within the menu. Something that normally matter a lot.

In our case we wanted the AWeber code to be loaded last, after all other menu items. A priority of 11 worked for us. This depends on the no. of menu items you have though. Perhaps you need a higher priority. Anyways, here is the final code:

https://gist.github.com/jasperf/8f31b684340a1c7f5bfa86b34cb33907

Button Trigger Code

This really loads the text and button that triggers the signup form really, but it is all that is needed. Code generated at Aweber. We only tweaked the inline style somewhat to our liking. Once the button is clicked the form will be loaded automatically.

Final Result

The final result at the website looks like this (image links to actual site):

menu with leadpages form text and button

 

NB Code has been slightly altered to remove our unique LP no.

Bonus

If you would like to target another menu, not the main one you can use the menu name. It is primary here below, but you can use the theme location name you used to register the menu

add_filter('wp_nav_menu_items','top_right_menu_button', 10, 2);
function top_right_menu_button( $nav, $args ) {
 if( $args->theme_location == 'primary' )
 return $nav."<li class='my-custom-menu-item'>Hell Yeah!</li>";
return $nav;
}