In this video we create some of the base templates that most WordPress themes use (index.php, page.php, single.php and archive.php). To learn more about how WordPress loads templates, you can read this article in the codex.
If you already have a local development environment set up that you like (using Vagrant, MAMP, Valet, or something else), feel free to skip to the next video. There’s nothing in this series that requires you to use a specific development environment set up. Continue reading
If you want to make a few design tweaks to a WordPress theme (and don’t see an option for it in the Customizer), you’ll likely need to use some custom CSS. Thankfully, WordPress has a great built-in Custom CSS module that allows you to safely add CSS code or override existing styles. This gives you almost unlimited design control over a site!
This video explains how to find the selectors in your theme using the Chrome developer tools and then add your own custom styles in WordPress.
When you’re developing a WordPress site locally or testing in staging, you’ll generally want to prevent the site from sending out emails to customers or users.
I’ve noticed that a number of other WordPress developers are fans of MailHog (great write up by Jonathan Christopher), but in many cases it’s easier if you don’t have to install anything additional on the server.
I use two plugins to block and then log emails:
“Disable Emails” prevents the emails from sending from WordPress, and “Email Log” is able to capture their contents in case you need to view them.
Since I sync my production environment to staging and local quite frequently, I have a script in my theme that activates these plugins when it detects the new environment.
WooCommerce sites are made up of a complex set of integrated parts. There’s WordPress, WooCommerce itself, other third-party plugins, and a theme. Each of these components require frequent updates and has the potential to break critical functionality on your site. This is why it’s critical to have automated tests.
For a WooCommerce site I used to work with, we had a checklist of items we would manually run through after any major update:
- Verify products on home page look correct and load
- Test “Add to Cart” button
- Test removing item from cart
- Verify all product on /shop page look correct
- Test complete checkout with Stripe for guest checkout
- Test complete checkout with PayPal for guest checkout
- Test complete checkout with Stripe with coupon for guest checkout
Needless to say, this took a lot of time. Thankfully, tests like this can all be automated using Ghost Inspector.
I haven’t found a solution for the Safari issue yet, but thought I’d share the method I’ve worked out for cross domain tracking with Mixpanel for the remaining browsers.
For the example, I’ll use domains a A.com and B.com. A.com is the primary website and B.com is a marketing website that refers traffic to A.com.
On domain A.com you’ll need to set up an URL that loads the tracking code when it’s called inside of an iframe. We can pass tracking data from B.com to the iframe using a query string, and an efficient method for passing that data is by base64 encoding an JSON object. Continue reading