xdebug is an awesome tool for debugging your PHP code. Rather than var_dump’ing your variables out in a page, you can peek into them in your editor at particular points in the execution. Interacting with it is supported by a wide range of editors, including Atom, Sublime Text, and PHPStorm. It’s a little finicky, and there are some common pitfalls that will leave you feeling like:
There are lots of tutorials out there for basic setup with a variety of local dev methods — so I won’t really touch on that. I’m using Pressmatic and Atom.
remote_autostart || remote_host
xdebug.remote_autostart = 0
xdebug.remote_host = 192.168.50.100
For local development, you can just set remote_autostart to 1 (aka true) and forget about remote host — they’re not both required. remote_autostart enables xdebug for any client, where remote_host just enables it for the IP specified. remote_host would be useful if you’re debugging on a remote server, and don’t want just anyone to see data on the backend of your site (bad security, mmkay?)
Everything is configured, but nothing is showing up in my xdebug client
I’ve yelled at my laptop until I was blue in the face trying to get xdebug working, and multiple times it’s been the same issue. By default, xdebug isn’t enabled on every request, you have to trigger it. The easiest way to do this is with a browser extension:
- Chrome – https://chrome.google.com/webstore/detail/xdebug-helper/
- Safari – https://github.com/mac-cain13/xdebug-helper-for-safari
- Firefox – https://addons.mozilla.org/en-US/firefox/addon/the-easiest-xdebug/
The extensions all add an arg to your request to enable xdebug on that request. Click the icon, then click debug, and reload the page. Now you should see data showing up in your client.
I’m a big fan of Divi by Elegant Themes, and they’ve got some crazy stuff coming in September: A front end WP editor powered by React. The video demos I have seen so far are incredible, and I’m looking forward to using it. Check out their website for a demo.
One of the first things I always do on a Divi site is copy the footer.php to my child theme so I can edit the copyright message. I finally decided to figure out a better way to do this, and as it turns out it’s pretty simple. Add the following filter to your child theme:
On line 5, we’re getting a dynamic date, and the site title. On this site, you would get © 2016 Kevin McKernan. All rights reserved.
Note that this is specific to Divi, if you’re using another theme you can accomplish something similar but you’ll have to find the right string of text to replace.
I’m working on a side project right now that has a lot of user / capability interactions, and I’m not as familiar with those parts of WordPress, so I’ve found myself searching the developer docs for functions fairly often. You can add this site as a custom search engine in Chrome to speed things up.
- Right click the address bar in Chrome, and click “Edit Search Engines…”. This will bring up a dialog of all the search engines in Chrome.
- Scroll all the way to the bottom, and add a new search engine. I called mine “WordPress Developers” and used they keyword “wpdev”. The URL you need is https://developer.wordpress.org/?s=%s. This tells chrome where to put your search query. Here’s an example:
- Search the developer docs at breakneck speed! Now I just open a new tab, type “wpdev”, hit tab, enter my search query, and go!
In many of the projects I have been working on lately, we have leveraged the WordPress REST API. It’s super easy to add your own endpoints, and it just feels better than the old admin-ajax way.
Wait, WordPress has a REST API?
Kind of. As of WordPress 4.4, there’s an api framework built in to core. The API project started as a plugin, and there are endpoints for posts, pages, etc in the plugin. However, there are not currently any core endpoints, as they’re still a work in progress, and subject to change.
I was reading this article by Pole Vault Web about using the media on a live site, which contains a few helpful tips for your local development sites. To recap, the idea is to save space on your local development sites, and not download all of the media files just to make your local environment work. There’s just one problem: like many WordPress developers, I’m using vvv for my local development environment. VVV uses nginx as opposed to apache, so a .htaccess file isn’t going to help you. You can do the same with nginx, you just have to add some code to your configuration file. Continue Reading