Screencasts – WP Theme Tutorial

Every site I deal with has some initial setup to deal with. First off I don’t want to email site users by accident from staging or local enivornments. Second I want to be able to log a bunch of data in the system like password resets…Third I want to be able to change configurations based on my environment. An example of the third item would be restricting access to the site on the staging server, but not on live/local. I don’t want to go in and make admin changes if at all possible so I automate it all via code. Today we’re going to look at how I deal with email logging and my starting setup for site environments. Developer Constants To start we need an mu-plugins folder in our wp-content folder. If you’re not familiar with mu-plugins, it’s a special folder that runs before all other plugins and it’s a MUST USE. So any code in there is always activated and running. Now in to our mu-plugins folder we need to add our Developer Constants plugin to start defining our environments. Place it in a folder called wptt-developer-constants. So our files should look like: wp-content mu-plugins wptt-developer-constants/wptt-developer-constants.php A quirk of the mu-plugins folder is that it won’t execute code inside folders. That means we need to add a bootstrap file at the base level to include all of our included plugins. Go ahead and create a file called wptt-bootstrap.php inside the mu-plugins folder and put the code below inside it.

While the default layout of the WordPress post screen is often perfectly suitable for your custom post type display. It's not always right. I'm currently working on a plugin where I need a single column for my custom post type so that I have a large area for my metaboxes. Today I'm going to show you how to force a single column on a custom post type. Our Starting Plugin CPT's should be in plugins. If you wonder why I've written about it before. So let's start by adding a plugin to a site. Create a folder in the plugins folder called wptt-site-demo and then create a file called wptt-site-demo.php.

Have you heard about Pluggable Functions in WordPress? A while ago I wrote a tutorial about how to log email by plugging wp_mail which is a pluggable function. Then I went off skipping on my way in to a land of bliss knowing I'd never again email clients by accident. Cue the dark clounds and ominous music. wp_mail is not plugged when... So there I was skipping along through a field of flowers and troubleshooting some password reset issues on a staging site only to find that the password reset emails were not getting logged. I had actually just sent a password reset email to a user by accident which made me frown and my client frowned. Lucky for us the user was a developer of a different stripe (not a WordPress developer) so when I emailed him about the mistake he understood. We still looked silly. wp_mail is not pluggable during a password reset it will send your emails so my previous plugin didn't work. We were also running in to issues with plugins like [wpMandril][mandril] which also 'plug' wp_mail. You can't plug a function twice though so all we got were errors. Logging all wp_mail without plugging it Now let's look at how I log wp_mail without using the pluggable function pattern. We'll start by taking a look at the full wp_mail code. if ( !function_exists( 'wp_mail' ) ) : /** * Send mail, similar to PHP's mail * * A true return value does not automatically mean that the user received the * email successfully. It just only means that the method used was able to * process the request without any errors. * * Using the two 'wp_mail_from' and 'wp_mail_from_name' hooks allow from * creating a from address like 'Name ' when both are set. If * just 'wp_mail_from' is set, then just the email address will be used with no * name. * * The default content type is 'text/plain' which does not allow using HTML. * However, you can set the content type of the email by using the * 'wp_mail_content_type' filter. * * The default charset is based on the charset used on the blog. The charset can * be set using the 'wp_mail_charset' filter. * * @since 1.2.1 * @uses apply_filters() Calls 'wp_mail' hook on an array of all of the parameters. * @uses apply_filters() Calls 'wp_mail_from' hook to get the from email address. * @uses apply_filters() Calls 'wp_mail_from_name' hook to get the from address name. * @uses apply_filters() Calls 'wp_mail_content_type' hook to get the email content type. * @uses apply_filters() Calls 'wp_mail_charset' hook to get the email charset * @uses do_action_ref_array() Calls 'phpmailer_init' hook on the reference to * phpmailer object. * @uses PHPMailer * * @param string|array $to Array or comma-separated list of email addresses to send message. * @param string $subject Email subject * @param string $message Message contents * @param string|array $headers Optional. Additional headers. * @param string|array $attachments Optional. Files to attach. * @return bool Whether the email contents were sent successfully. */ function wp_mail( $to, $subject, $message, $headers = '', $attachments = array() ) { // Compact the input, apply the filters, and extract them back out extract( apply_filters( 'wp_mail', compact( 'to', 'subject', 'message', 'headers', 'attachments' ) ) ); if ( !is_array($attachments) ) $attachments = explode( "\n", str_replace( "\r\n", "\n", $attachments ) ); global $phpmailer; // (Re)create it, if it's gone missing if ( !is_object( $phpmailer ) || !is_a( $phpmailer, 'PHPMailer' ) ) { require_once ABSPATH . WPINC . '/class-phpmailer.php'; require_once ABSPATH . WPINC . '/class-smtp.php'; $phpmailer = new PHPMailer( true ); } // Headers if ( empty( $headers ) ) { $headers = array(); } else { if ( !

Today's screencast will show you how to set up Stripe with WooCommerce since I've had a few questions about it. http://www.youtube.com/watch?v=fjzf1dA0_uE

WordPress comes bundled with a great jQuery library called jQuery Form which makes saving forms via AJAX super easy. Today I'm going to show you why you shouldn't be using standard AJAX calls to save forms and how to use jQuery Form in WordPress. You can download the plugin I use in the screencast from Github[plugin]. Screencast http://www.youtube.com/watch?v=QvoG6FPGzHY

Part of being a great developer is simply knowing how to search for your current issue. There is no way I could keep all the documention for WordPress, PHP, jQuery, Sass...in my head. My typical workflow has been to simply Google for the term and then click the first link since it's usually the WordPress Codex entry. Wouldn't it be nicer to be able to search across many languages right out of your editor? How about StackExchange and Google results mixed right in? Well you can. It is called Dash Dash is a Mac App that is free to trial and has a $19.99 in app purchase. At it's simplest level dash is just a dedicated application to search documentation than includes Google Results and StackExchange results. Where it really gets powerful (and what convinced me to part with $19.99 in 2 minutes) is the integration with your editor. I use Vim so for me I hop on to GitHub and download the dash Vim plugin. That gives me access to the :Dash command from within my editor. :Dash wp_send_json will bring up all the json functions in WordPress with Google and Stackexchange right under. :Dash esc_ wordpress will give me all the escaping functions in WordPress (since I limited it) along with the Google and StackExchange results under it. If I wanted anything with esc_ in it then I'd omit the wordpress exclusion and I'd see PHP options as well. Installing documention is a simple as clicking download from the Dash preferences. Dash is awesome, go get it. Screencast http://www.youtube.com/watch?v=I5k5I00cyDw

Recently I needed to do a custom export of WooCommerce orders so we could send them to an external service. The external service could already read orders formatted in an XML file, so all I needed to do was get the WooCommerce orders exported in the XML format and put in a directory that could be accessed by the external service. The first part of that was creating a new place to store files in WooCommerce which meant I needed to create a new folder when my plugin was activated. Today we’ll take a look at how to add a folder on plugin activation. Plugin Skeleton The first thing we need is a plugin skeleton.

I’ve already written 2 posts on Vagrant, specifically using VVV to run your WordPress development boxes. Working with WordPress and Vagrant - Basics Vagrant and Custom Domains with WordPress The second post did show you how you could add a custom domain to a Vagrant install, but didn’t specifically call out my day to day workflow for using Vagrant. My VVV workflow Most of the time I use the same VVV box for all projects. So all theme builds and plugin builds…To add a new site to an existing VVV box I use the instructions you’ll find below. If I have to build a WordPress MU site I usually build a custom VVV box that has all the domains mapped and the dabatase setup for the user. Then the next developer just has to clone our VVV box and add the hosts file entries to get the project running. Adding the new domain Our first step is to open you terminal program and change directory (cd) to the VVV install you want to add a domain to. From the root type cd config/nginx/sites. Here you should find a few files ending in the .conf extension. Copy one and rename it to screencast.wpthemetutorial.com.conf then open it in your editor of choice. You’ll need to change 2 lines. On line 28 change the server name to match the domain you want to see the site at: server_name screencast.wpthemetutorial.com; On line 31 you should see the path to the install location in your www directory: root /srv/www/wptt-screen; Now we need to go back to the root of the Vagrant box and go in to our database directory by typing cd database. Then open init-custom.sql so we can add our custom database commands. I copy the last entry and pasted it below. I’ll change all our values to swptt. I don’t think it’s worth making it super long/hard since this is not a live web sever and anyone that can access this has access to your machine. CREATE DATABASE IF NOT EXISTS `swptt`; GRANT ALL PRIVILEGES ON `swptt`.* TO 'swptt'@'localhost' IDENTIFIED BY 'swptt'; Now we need to go back to the root of the VVV box and type cd www to get to the web directory on our server. Here we need to move all the WordPress files in to their proper spot in the wptt-screen folder. You can do this by typing cp -rv wordpress-default/ wptt-screen. Finally I want to remove the wp-config.php file that was in the copied WordPress install. Type rm -rf wptt-screen/wp-config.php and the wp-config.php file will be gone. Now you need to type vagrant up to start the VVV box. Once Vagrant comes up all you should need to do is type screencast.wpthemetutorial.com in to your browser and then follow the WordPress install steps. Screencast https://www.youtube.com/watch?v=mp91oUUhEn4

Today we’re going to conitue from last weeks screencast on removing the purchase button from all products inside a category. It was great to get the button removed but makes the page almost totally useless. Now we’re going to take a Gravity Forms form and add it to our page so that users can fill out the form and inquire about the product. Setting up the form To start with we need to set up our form with the fields we need. I have mine set to ask for the name, email, phone number. It also provides a textarea for the site user to ask their question. The final field is called product name and we’re going to dynimically populate it with the name of the product that is currently on the page. Asking the customer to fill out that extra bit of information is just sucky so we’ll do it for them. Under the field advainced tab you need to check off “Allow field to be populated dynamically” and then you need to enter a parameter. We’ll use ‘west_boat_name’. The parameter is just a way for Gravity Forms to be able to reference the field for our dynamic population. Adding the form to our product Now that we have our form ready we want to add it to our product and here is our code. /** * Our custom text * * @uses get_product() Returns the product object for the current product in the loop * @uses get_the_title() Returns the title given the post_id * @uses do_shortcode() Does the shortcode content */ function western_boat_purchase_text(){ $product = get_product(); $product_title = get_the_title( $product->ID ); ?> You can call us at 1-866-644-8111 or fill out the form below.

Recently I had a client want to remove the purchase button on their WooCommerce store for all products in a category. We also needed to remove the button for all items that were a child category of the main category. Here is a quick diagram of the prod...

Something I missed for a while when working with PHPstorm and LESS is how to compile just the top level files only. I wanted to be able to break out the styles for menus and widgets in to their own LESS files, but I didn’t want 9 CSS files to enqueue. Take a look at this screenshot to get a visual idea of what I’m talking about. File Watchers To access the LESS compile settings press ⌘, and select File Watchers in the admin panel. Then click on LESS and then press ‘Enter’ or select edit from the menu at the bottom. Then in the next dialogue that pops up simply select ‘Track root files only’. Yeah that’s it I missed a single checkbox for months. Screencast

Last time I wrote about dealing with issues with WooCommerce custom statii when I set up my Woocommerce store. Today we're going to take a look at another tweak I made to WooCommerce. My book has 2 packages. The first is the book and the second is the book plus interviews with other business owners and freelancers about how they run their business. It costs extra to purchase the book and videos so I want to restrict access only to those that have purchased the access. WooCommerce already has the Groups Plugin which allows content restriction but it needs the WooCommerce Subscriptions plugin as well. See it's geared towards monthly payment and memberships so not quite what I need. All I want is if you have purchased the book and videos you get access to the interviews. 1 function To achieve this all we need is one function called `wc_customer_bought_product( $email, $user_id, $product_id )'. wc_customer_bought_product takes 3 parameters. $email - The email of the user we are checking $user_id - The id of the user we are checking $product_id - The ID of the product we are checking the purchase for For my book the product variation with the books and video has the ID of 4388. So that means I need to get the email and user id for the current user.

With the launch my book called "Don’t be an Idiot: Learn to run a viable business I had to install WooCommerce to run the sales process. With that came an issue, virtual digital orders were not getting marked as completed automatically. I found a few resources and a plugin that claimed to fix this, but I wasn’t having any luck. When I started to dig in to the issue I found that WooCommerce stores it’s order statii as tags. Then by taking a look at the tags I saw that the WooCommerce ‘Pending’ tag was actually reading as ‘pending–2’. It was added as ‘pending–2’ because there was already a tag on my site that was using the ‘pending’ slug. In my case it was Edit Flow (though a tag on a post or in any other plugin would get the same result) which also stores it’s custom statii as a taxonomy. To fix the issue, remove the offending taxonomy term that took the ‘pending’ slug. Then remove the tag from WooCommerce and add ‘Pending’ back in. You can find the WooCommerc tags at: http://yoursite.com/wp-admin/edit-tags.php?taxonomy=shop_order_status&post_type=product That’s it, remove the tag conflict and WooCommerce should be working again with no issues. You can follow a bug report on Github on ticket 3064. Screencast https://www.youtube.com/watch?v=ksY8TyLg9uI

A few weeks back I made the move to WPEngine. Here are a few of the features I really love about the hosting environment. I'd highly suggest that you change to some form of managed WordPress hosting. http://www.youtube.com/watch?v=tihVjUtWhCA

In my last screencast about WP Touch Pro I showed my site running locally (on my Mac) in an iOS device. Since then I've had a few people ask me exactly how I did that. Well today I'm going to show you how. xCode The first place to start is with xCode. xCode is Apple's developer tools for build iOS applications. It has a bunch of stuff that I don't need, but at $4.99 it's a super cheap way to test iOS sites. It gives you the closest possible experience to iOS without having a device in your hand. So many tutorials show you to dig through you file system to get your iOS simulator, but that's a stupid waste of time. Simply open xCode then under the 'xCode' menu item hover over 'Open Developer Tool' and choose iOS simulator. Once you've done that go to your dock and right click and choose to pin the application to your dock. So you've got an iOS simulator on your Mac now but you still can't really view source easily. Chrome Chrome comes to the rescue on viewing the code of your website in an iOS view. Right click and choose 'Inspect element'. Then go to the little gear in the bottom right hard corner and click it. In the window that pops up check the 'User Agent' option. Now in the dropdown you can choose from lots of user agents that Chrome can emulate. You will need to refresh the window before the site will recognize the User Agent that Chrome is emulating. Now using Chrome user agent spoofing is a step further away from a genuine iOS experience than the iOS simulator. I've found that there is some correction to do to get your site looking perfect on an actual iOS device. Screencast https://www.youtube.com/watch?v=PUa_yT50Ddk Show Notes At the beginning of the video I spoke about a new freelance book I'm writing. It's called "Don't be an Idiot: Run a Viable Business.