Web Dev Blog

Looking for help with WordPress, Apache, Vim, Web Security and more. Here are a few tips.

Category: WordPress

WordPress Production and Development with Fiddler Proxy

A common problem with development, staging and production environments for WordPress projects is switching your browser between the environments. Traditionally the way to do this was with hosts file updates that redirect a domain name to the IP address of your development server. WordPress is setup with a specific domain name, so running on a subdomain or a development domain name can introduce problems into the site when you move from development to staging or production. In a perfect world your development and staging environments should be 100% identical to the production environment, that way there aren’t additional testing requirements to verify bugs haven’t been introduced in the migration process. Finally there is a convenient way around this by using a proxy.

The development environment in this situation is using the Roots Sage framework which comes gulp and browserwatch which runs on port 3000 by default, but it would be easy enough to setup a similar environment by running apache or nginx on a non-standard port in your development environment.

Fiddler is a free “web debugging proxy for any browser, system or platform”. It will run in the background and intercept all of the traffic between your browser and the Internet. One of the options it offers is a Host Remapping function (found under Tools>HOSTS). The great thing about the Host Remapping, for our purposes, is you can include port numbers in the remapping.

In this example, the development environment is running on an Ubuntu server on the local network. www.foo.com:3000 is redirected to the local IP address port 3000. When this is enabled, www.foo.com will route to the live production environment and www.foo.com:3000 will route to the dev environment. This allows you access to both environments simultaneously for comparison. WordPress works exactly the same in both environments.

fiddler-host-remapping-wordpress

A big advantage of this is you no longer have to edit your Windows Hosts file every time you want to switch back and forth.

To avoid confusion it might be good to integrate something like WP Local Toolbox which can give you some visual cues as to which server you are accessing without adding additional configuration problems.

Images Not Uploading From Page – WordPress 4.2

Since updating ot WordPress 4.2 (WP 4.2.1 now), I have had some problems updloading images.

The nice folks over at wpmudev.org helped me out with the problem suggesting that it was probably a javascript problem caused by a plugin conflict.

I did some plugin troubleshooting and determined that this was the case. After more troubleshooting it came down to a conflict between WordPress SEO and Post Thumbnail Editor.

Here is a link to the thread on the WordPress Support forums

JS bug prevents uploading media in Page/Post editor

A temporary workaround is simple enough to get media and image uploads working from the page or post editor.

Just comment out line 171 in post-thumbnail-editor.php and the upload problem will go away.

/** For the "Edit Image" stuff **/
/* Hook into the Edit Image page */
//add_action('dbx_post_advanced', 'pte_edit_form_hook_redirect');

Setting WordPress Permissions

I use the amazing wp-cli (http://wp-cli.org/) to install WordPress on my development machine, but for some reason the file and directory permissions are always wrong.

I have added this step as part of my installation procedure:

wp core download # Use wp-cli to download the latest WordPress
chown www-data:www-data -R * # Let apache be owner
find . -type d -exec chmod 755 {} \; # Change directory permissions rwxr-xr-x
find . -type f -exec chmod 644 {} \; # Change file permissions rw-r--r--

This sets all the permissions correctly so Apache no longer gives any errors.

www subdomain causing WordPress multisite redirection loop

WordPress Multisite Redirect from a www Subdomain in Cpanel

One of my clients in my multisite network has been having a reoccurring error.  From time to time the www.foo.com domain would stop working.  foo.com isn’t the primary, so the site would redirect to www.foo.com and fail.  Just a blank page would show.

Of course when a client’s site is down it’s panic mode it can sometimes be difficult to document the fix and then find it again a few months later when the problem reared it’s head.

This time was different, now the problem is solved and I’m documenting the issue.

Reviewing the Apache Logs

I started out seeing this error in my Apache error log

[Wed Apr 16 14:30:31 2014] [error] [client xx.xx.xx.xx] Request exceeded the limit of 10 internal redirects due to probable configuration error. Use 'LimitInternalRecursion' to increase the limit if necessary. Use 'LogLevel debug' to get a backtrace.

This indicated that it was a redirect issue.  .htaccess causes problems sometimes, the next step was to confirm that the .htaccess file matched what was in the Codex

https://codex.wordpress.org/htaccess

Next step was to look at the Apache logs closer by setting LogLevel debug.  These lines were added to the Apache httpd.conf

RewriteLogLevel 3
RewriteLog "/var/log/apache2/rewrite.log"

(Several comments said this no longer works in newer versions of Apache, but it worked like a champ for me.)
These logs showed more evidence that the problem had to do with the www, but still weren’t helpful enough.  They showed a www directory under the primary domain.  A review showed there was an empty www directory.  This was part of the problem.  Deleting the www directory eliminated the problem, but didn’t explain why it kept coming back.

The httpd.conf directory still showed a VirtualHost listing for foo.com located in a www directory underneath primary.com, but the httpd.conf had warnings not to make edits there.

Back in cPanel, the only listing for foo.com was as a parked domain.  Attempting to delete the parked domain resulted in an error message.  Even stranger.

Finally checked the subdomains.  At some point a subdomain using www for foo.com had been created.  Attempted to delete this subdomain, but again, an error.

Hmm… so can’t remove the parked domain, and can’t remove the subdomain.  Maybe because both existed, back to Google for more searching and finally an answer came up in the cPanel forums.

https://forums.cpanel.net/f34/extra-www-subdomain-cannot-remove-254831.html

cPanel won't allow users to create a "www" subdomain - and rightly so, because ww is handled in the main DNS as a CNAME...

However - some of our users have managed this (probably many years ago before the limitation was put in place).

This cause massive problems every apache recompile - because the system thinks the domain's document root is public_html/www

And the reply…

You should check for "www" subdomain entries at the following locations:
/var/cpanel/userdata/username/main
/var/cpanel/userdata/username/sub.maindomain.com
/var/cpanel/users/username
Remove entries within the files, and any individual files used purely for the "www" subdomain. Ensure you do not remove the "ServerAlias" itself, as you will still want the "www" alias for the domain name in the Apache configuration.

When you have finished, run the following commands:
/scripts/rebuildhttpdconf
/scripts/updateuserdomains

Following these steps removed the subdomain from the system and should eliminate the problem permanently.

Using CSS 3 @font-face for font rendering

There are multiple methods of creating custom fonts for web pages, Cúfon, sIFR, Google Web Fonts, etc… None of these have been a good fit for my projects until I looked into the CSS3 @font-face method. It’s simple to use and SEO friendly.

All you have to do is go to urbanfont.com, fontsquirrel.com or another good source of appropriate licensed fonts and pick out what you want.

Once you have the font files, use the @font-face generator at fontsquirrel.com to create a kit that includes all of the font files you need for browser support. Put the fonts and sample code in the appropriate places and update your CSS to use the new fonts. Walla, shiny new fonts on your web page.

Using Akismet with Contact Form 7 (CF7)

This is an issue I’ve run into multiple times, and I have to search for it every time, so thought I would share it here. You can use the AWESOME Akismet to filter spam on contact forms in WordPress that use Contact Form 7.

Next, add the following Akismet-related options into the appropriate fields in your form.

akismet:author
Add this option to the field that accepts the name of the sender.
Example: [text* your-name akismet:author]
akismet:author_email
Add this option to the field that accepts the email address of the sender.
Example: [email* your-email akismet:author_email]
akismet:author_url
Add this option to the field that accepts the URL of the sender.
Example: [text your-url akismet:author_url]

And the most important tip:

If Akismet judges the submission as spam, Contact Form 7 cancels the sending of mails and shows a message that says, “it failed to send the message.” You’ll see an orange border around the response message when it has been judged as spam.

Visit the Contact Form 7 blog for more info.