Author: Peter Knight

Advanced Guides & Resources Dealing with the Customizer API in WordPress

The customizer is one of the newest and most fast developing areas in WordPress. It’s also one of the tougher APIs to code for because there are a lot of moving parts and to get the most out of it you really need to be proficient with the javascript based API as well as the PHP based API. Here is an evolving list of resources that go beyond the Codex pages to help developers out as they build out their own customizer functionality.

Code Examples For Working With the Customizer API by the Theme Review Team

Various examples of working with the Customize API, such as creating simple and advanced panels/sections/controls/settings. But it’s mostly PHP and doesn’t touch much on the client side of things.

Code Example For Creating a Postmeta Based Customizer Setting

This is a working example of a postmeta based customizer setting by Weston Ruter. Note that some of this code won’t transfer seamlessly to, say a custom post type scenario without some adjustments, because it hardcodes for a post type of post.

The Complete Guide to the WordPress Theme Customizer

Daniel Pataki does a good job walking through a more complete tour of what you might be able to accomplish with JS driven logic.

Dependently-Contextual Customizer Controls

Weston Ruter guides you on creating Customizer controls that instantly toggle on or off depending on state using client-side logic.

Customizer JavaScript APIs: The Previewer

This is an excellent little tutorial that shows you how to interact with customizer controls programmatically by actions triggered on the preview page.

Resetting the Customizer to a Blank Slate

A useful starting point if you want to create a dedicated customizer setup that is separate from the default experience.

Customizer tutorials and documentation

An older post by Justin Tadlock grouping some guides and articles on the customizer

And lastly two streams of resources of new guides and updates on the customizer are here:

XWP’s Make Blog Covering The Customizer

And the Make blog covering the customizer on WordPress.org:

Make Blog posts Tagged with Customizer

How to commit an existing local project into Bitbucket with SourceTree

If you decide you want to commit a project you have hosted on your machine into BitBucket and you’re using Sourcetree to manage it, you’ll find that there is no straightforward way to do that. When you try to create a new Repo inside Sourcetree, it demands that the project starts in a new, empty folder. There is no option to setup a new repo from existing files. This means it’s actually stupidly impossible to commit existing project files into a fresh repository in one smooth operation.

People have posted alternative ways of getting around this but the simplest way to do it goes like this:

  1. Create a repo inside BitBucket
  2. Create a new folder on your machine which will act as a placeholder
  3. In SourceTree go through the new repository dialogs and link it to the repo on Bitbucket and the folder you created in step 2.
  4. After completing step 3 there will be a .git folder in your placeholder folder, move it to where you actual project files exist
  5. SourceTree will automatically figure out that the folder was moved, you can delete this bookmark
  6. Re-add the project by dragging the folder containing your project files and .git folder into SourceTree
  7. Now you can commit your files into BitBucket from SourceTree

It’s the easiest way because it takes advantage of the fact that .git folders can be easily moved without messing things up in SourceTree.

Why anybody doing computer work should use gaming equipment

The many benefits of hotkeys

I’ve always been keen on hotkeys as they help you get stuff done faster as well reduce the amount of friction you get from having to do repetitive operations. It’s a huge time saver. These wins you get with hotkeys also compound over time to make those few seconds saved per operation grow into hours. And last but not least, when you are in the zone with your writing or your designing, your drawing or your programming, you want to stay in the flow! Hotkeys help you stay in the flow by reducing the amount of time navigating the screen, typing, searching for what you need and contorting your fingers.

Keyboards and mice with programmable keys

So I’ve always paid attention to input devices that provide extra keys, but for some strange reason regular keyboards aimed at those doing computer work rarely come outfitted with a meaningful amount of programmable keys. But hardware companies do cater to gamers and they happen to love hotkeys. For this reason, if you want to maximize the utility you can get from hotkeys, you are best looking at some gaming equipment. These devices may look designed for a younger audience but they are more than equipped to deal with a professional workload. They are designed for precision, endurance, responsiveness and programmability on an order of magnitude more than regular consumer products. In other words, if you do serious computer work, use gaming equipment.

Most people when they think of programmable keys, they think of keyboards and maybe a mouse with a few extra keys. But my Perdition mouse has 18 programmable keys and has made the most gains for me.

Example use cases & a magical mouse button recipe

Hotkeys can do a variety of things. You can program to output any length of text or key presses. You can of course configure complex keyboard shortcuts into a single button so you don’t have to do finger gymnastics. You can record and play macros and automate complex sequences of commands.

I have fallen in love with my mouse configuration, let me show you the ways:

  • separate buttons for Copy, Paste and Cut. It’s amazing how much work quicker using these buttons is than with regular keyboard presses.
  • a button to bring up clipboard history and paste any item from that history
  • manage virtual desktops by toggling between desktops with separate keys
  • instantly scroll to the top or bottom of a page, something that is very useful in today’s web when pages have gotten more scroll heavy
  • Forward and Back buttons work in almost every program
  • Screen dimming keys (using f.lux) at a finger’s touch
  • zoom in or zoom out by pressing a button and moving the mouse wheel

Recommended Keyboards

Logitech G510s Gaming Keyboard with Game Panel LCD Screen

Logitech G11 Gaming Keyboard (Black/Silver)

SteelSeries Merc Stealth Gaming Keyboard

Due to the SteelSeries Merc Stealth Gaming Keyboard’ many programmable hotkeys, it can boost productivity for writers, designers and programmers
A picture of the Logitech G11, it’s the keyboard I use because it features 18 programmable hotkeys on the side and 3 modes to use those 18 keys for 54 hotkeys.
Logitech’s G510s features 18 programmable hotkeys on the left side and you make 3 configurations with those 18 keys for 54 hotkeys that will boost your productivity with your professional tools

Recommended Mice

Razer Naga Ergonomic MMO Gaming Mouse

This Razer Naga Ergonomic Gaming Mouse boasts 12 thumb buttons, originally geared toward MMO games, it’s perfect for adding a variety of work related hotkeys

SHARKK® Gaming Mouse for the Pro Gamer 16400 DPI High Precision Programmable Laser Gaming Mouse for PC and MMO with Omron Micro Switches 18 Programmable Buttons Weight Tuning Cartridge Gaming Mouse with 12 Side Buttons 5 programmable user profiles

Sharkk’s pro gaming mouse has 18 programmable keys, which is amazing. It blows a normal mouse out of the water as far as productivity goes.

Redragon M901 PERDITION 16400 DPI High-Precision Programmable Laser Gaming Mouse (Black)

Redragon’s Perdition series is the mouse I own and hit has 18 programmable hotkeys and flashy programmable lights to go with it. It’s the best mouse I’ve used for my work flow.

My NBA Season 2015-2016 Predictions

Just for fun!

Rookie of the Year: Emmanuel Mudiay

MVP: Harden

Finals: Warriors – Bulls, Warriors win

Standings prediction:

  1. Warriors
    63 wins. Same team as last year, when they were far and away the best team. All of their young core players now have championship experience
  2. Oklahoma
    60 wins. A fresh coaching philosophy to go with 2 top five players, Ibaka’s defensive anchoring and decent role players should guarantee a Western Conference finals spot
  3. Clippers
    59 wins. On paper, the best team. They have the most productive players in the league at three positions and a deep bench. Chemistry will prevent them from winning
  4. Memphis
    57 wins. Good roster additions and when healthy one of the toughest teams in the league
  5. Rockets
    57 wins. Super deep but no signs that the star players will mesh in a way that makes the whole more than just their parts combined.
  6. Spurs
    54 wins. The best coached team in the league, but will drop off due to poor point guard play, age decline. Aldridge doesn’t amplify what the Spurs do best.
  7. Chicago
    58 wins. A well-coached team, with a very deep line up and the offense to make it work
  8. Cavaliers
    50 wins. I don’t think they’ll be healthy at the start or end of the season. Kevin Love adds as much as he takes away. They succeeded last year through pure will, gutsy play from role players who won’t be on the floor if Irving and Love are playing.
  9. Pelicans
    44 wins. A lot of injury concerns, but the best player in the league can carry them
  10. Hawks
    49 wins. An efficient well-coordinated machine. Not sure if Korver can replicate past successes and will there be friction around Schroeder’s ambitions and the team.
  11. Heat
    48 wins. A dangerous team but there’s not a lot of 3pt scoring and we’ve no idea how the starting 5 gels because they haven’t played together. Feels like a mish mash of some very good pieces.
  12. Wizards
    48 wins. Elite play in the backcourt, solid front court and interesting depth.
  13. Bucks
    47 wins. Offensive upgrades, defensive downgrades should land them around .500 and perhaps even more in the East
  14. Celtics
    45 wins. Excellent coaching, but the roster features no remarkable players, there’s only so much you can do with non-allstar level players. And that ceiling has to be lower than what the Hawks achieved with 4.
  15. Raptors
    44 wins. Firmly belong in the good but not great category
  16. Suns
    42 wins. Well coached, competitive, decent roster but no reason to think they will be any more than an 8 seed
  17. Pistons
    42 wins. Van Gundy can take this squad to the playoffs with a roster complimenting Drummond’s play. But their point guards are iffy and Drummond does not appear to have the kind of hard core determination you see in elite caliber players.
  18. Kings
    42 wins. They will compete almost every night and have a lot of talent, they are only low because of combustibility in their roster makeup.
  19. Pacers
    35 wins. One of the best coaches in the league will get a lot out of any collection of players and Paul George looks good
  20. Timberwolves
    35 wins. Loaded with young talent and some veteran leadership is present as well
  21. Utah
    34 wins. Overrated at this point
  22. Mavericks
    32 wins. Pretty weak roster but enough talent and coaching to get 30+ wins. I predict Deron Williams will be yet another player that didn’t pan out.
  23. Magic
    27 wins. Talented young players that will compete but not be efficient
  24. Denver
    26 wins. Potential rookie of the year candidate, in form Gallinari and improved chemistry with better coach and departure Lawson. Lot of bad teams to run off the court.
  25. Portland
    24 wins. Lillard will be in hero mode almost all the time. That doesn’t win games in today’s NBA
  26. Lakers
    23 wins. So many inefficient shots await them
  27. Nets
    23 wins. Will win some with strong center play out of Lopez
  28. Knicks
    22 wins. Destined to be bad
  29. Hornets
    22 wins. Mediocrity
  30. Sixers
    18 wins. Meh. Excited to see Okafor play.

Sneak peak of new code snippet plugin for WordPress

Writing code examples inside the WordPress editor is a lousy experience with most plugins. Most of them involve writing down shortcodes, using clunky input dialogs and messing with spacing because tab functionality doesn’t work properly. Syntax highlighter implementations also tend to be onerous, they are often clunky and bloaty and load too much stuff. In fact I was so fed up with existing plugins that I stopped posting code tutorials on this site.

Ever since Tinymce got updated to the v4+ branch new things have become possible with the editor. One of the coolest things is the ability to live preview shortcode output right inside the (visual) editor, as well as easily adding a graphical user interface for these shortcodes. It is an order of magnitude more user-friendly. I don’t think any of the existing code plugins have jumped on board the live-preview train yet, so I decided to implement a solution myself.

I made some nice progress with a plugin I have dubbed ‘Code Shower’. Below is a sneak peak.

here’s an example of how a (css) code snippet looks on the front-end:

[codeshower ui_state=”” language=”text%2Fcss” code=”.excited%20%7B%0A%09font-weight%3A%20bold%3B%0A%09font-size%3A%203em%3B%0A%7D”]

And here is a screenshot of how it looks inside the familiar WordPress post editor:

This shows the live preview inside the WordPress editor displaying my css code snippet
This shows the live preview inside the WordPress editor displaying my css code snippet

And below is what the graphical interface looks like when inserting a new code snippet. It still needs some polish, but it should give you an idea.

This is a pop dialog that shows when adding or editing a code snippet inside the editor.
This is a pop dialog that shows when adding or editing a code snippet inside the editor.

There is still some work to do. Right now I am testing the plugin and it does have a dependency on a commercial plugin I’ve developed called Super Content Widget Pro. I’m probably going to make a it free for customers of Super Content Widget Pro, but we’ll see. Would you be interested in a plugin like this? Let me know.

A guide to choosing a WordPress Plugin and Theme automatic update solution

If you have created a commercial or private plugin or theme and want to provide automatic updates for your product a number of solutions are available to you. With so many different avenues, which one is best for your project?

Code your own updater

There are a few guides out there that show you how to write the code for a basic plugin/theme updater. Notable sources:

Professional WordPress Plugin Development – a foundational book that you should have read if you are serious about WordPress development, it includes a section that shows you how to code an updater.

A Guide to the WordPress HTTP API: Automatic Plugin Updates – a tutsplus article

The benefit of coding your own is that you can keep things nice and simple. If you are needing more sophisticated features, you might find your time is better invested by using an existing solution instead.

Use an existing free updater framework

There are a couple of freely usable frameworks out there that you can get up and running very quickly, notable sources (all can be found on github):

1) W-Shadow has a plugin & theme updater as well as a server script to act as a repository. The server code is not dependent on WordPress, which is both a pro and a con, although it can be easily integrated into a plugin. You can quite easily customize it if you are open to getting your hands dirty with code (if you want to add in your own authentication protocols for example). The code isn’t formatted to WordPress guidelines which can be a bit jarring if you are customizing it. One perk is the ability to parse a zip package and extra all the meta information out of it so you don’t have to type this information out redundantly through an interface or in a script.

2) Automatic Theme & Plugin Updater for Self-hosted themes and plugins by Jeremy Clarke. This I haven’t tested and doesn’t appear to be maintained.

3) Reaktiv Remote Repo. This was created by Aaron Norcross, a reputed and trusted developer. It’s simple, easy to read and integrate. What’s not to love.

Purchase an off-the-shelf self-hostable solution

There are a couple of turn-key commercial solutions

Easy Digital Download has a commercial licensing add-on for software. EDD itself is free and this is a paid add-on, the developer is of a high standard and has managed to create a community around his products.

Woocommerce Software Add-on. It is pricey for an add-on, but it runs off the most popular e-commerce solution for WordPress.

Auto Hosted. The most cost-friendly of the bunch and also the most feature complete.

Sign up to a Hosted Updater Service

There are some pros and cons to using a hosted service.

Pros: you don’t have to maintain the relevant code, it’s all taken care of you. You don’t have to worry about your server going down. There are quite a few extra features that you get.

Cons: you have to worry whether the service sticks around and if the service goes down that can affect your customer relations. The cost grows with time when you pay per month. You have less control over the process. Most importantly though is that you are handing out data to another party and entrusting them to manage it responsibly. If a hosted service is compromised it could send malicious updates. Another business concern is the analytics you give them. By letting them handle your product updates you effectively share your sales data with another company that could bed used or shared in undesirable ways.

WP-Updates. It looks to be a very streamlined and easy to implement solution and also very price friendly. The company behind it is Dev7Studios (which appears to be run by a pair of developers) which has quite a portfolio of products. This is both a good sign and a bad sign. Good because they are likely to stick around long and bad because they might be(or become!) your competitor with one of their products and you would be arming them with valuable analytics.

SellWP is a fully featured solution that also takes care of a shopping cart and all of the other components need to sell WordPress products. It really is designed to get you selling your product as soon as possible. Unlike any other product, the pricing is based on sales and not on a fixed monthly or yearly fee. I think this is great and it’s especially good for those starting out. SellWP is run by a single developer; this might mitigate some of the concerns I have with having another commercial entity have access to valuable analytics, but it’s also a potential risk when a single person is a point of failure. If you are running an appreciable amount of business it would be important to have a plan B in place just in case.

How to recover a lost or disappeared application window (Windows tip)

So this is an issue I have from time to time and it had me dumbfounded. I would lose a handful of windows of programs I had open and running. The usual trick to retrieving lost windows, or windows that have gone ‘off’ screen is to try one of these:

  • hit alt + tab, click the program thumbnail to select it, then use a keyboard shortcut to move it back on screen
  • hit windows + left arrow key or windows + right arrow key will move a window from left to right. Pressing this repeatedly will move this across screens in a multi-monitor setup
  • hit windows + d to show all windows, or windows + shift + m to restore windows
  • right click the windows taskbar and choose one of the windows display options from the menu

This wasn’t working for me because the application windows in question weren’t being recognized. If you check the task manager (navigate to it with control + alt + del) and you see the program in question running in the processes tab, your program is in fact still running. Then you can try this:

Solution:

  1. Install process explorer (a free tool hosted by Microsoft)
  2. Run it
  3. Select the relevant program and right click to open up a menu, select “window”, click “bring to front”

Applies when:

  1. When you have lost an application window while the application is still running (verify it is running with task manager)
  2. When the application is not visible as an active program in the windows task bar and can’t be navigated to with alt + tab
  3. When you can’t restore the window by interfacing with its system tray interface (if applicable)

Autoresize for wp_editor (the TinyMCE editor) in WordPress 4.0+

A lovely feature finding its way into the default post editor for WordPress is autoresizing. This means that you no longer have to scroll up and down inside the editor, it will expand to fit your content automatically removing the scrollbars. It is even better now that the toolbar will always stay in view.

If you are using wp_editor to create custom editing instances, you can take advantage of this feature too. Previously I was using an autoresize plugin for TinyMCE but now it is as simple as passing in a setting.

[codeshower ui_state=”” language=”php” code=”wp_editor(%20%0A%20%20%20%20”%2C%20%2F%2F%20content%0A%20%20%20%20’yourcustomeditorid’%2C%20%2F%2F%20a%20unique%20id%20in%20lowercase%20letters%0A%20%20%20%20array(%0A%20%20%20%20%20%20%20%20’tinymce’%20%3D%3E%20array(%0A%09%09’resize’%20%3D%3E%20false%2C%20%2F%2F%20disables%20the%20ability%20to%20resize%20the%20editor%20with%20the%20mouse%0A%09%09’wp_autoresize_on’%20%3D%3E%20true%20%2F%2F%20editor%20expands%20to%20fit%20content%0A%20%20%20%20)%20%2F%2F%20settings%20array%0A)%3B” linenumber=””]

The Many Ways David Thorpe Is Wrong About Lebron

This is for sure one the best stories in the 2 decades that I have been an NBA fan.

In one of the most crazy basketball off-seasons ever and leading up to the announcement that Lebron James is returning to Cleveland, some of the most respected media members got it wrong. None surprised me more than David Thorpe’s opinions leading up and after the announcement. Thorpe can be counted on to provide some of the most interesting and astute player analysis in the media landscape, but he’s shown to be a poor judge of psychology and reasoning in this particular case.

David Thorpe had opined that the odds of the Heat breaking up was 1%. He was that sure Lebron would stay with the Heat. Now, it’s hard to get these things right, but that was a pretty unilateral opinion. Other members of the media were much less sure.

Instead of taking the 2 year deal Thorpe foresaw, Lebron is going straight to Cleveland.

After the decision was announced Thorpe was strangely pouring some cold water on the decision.

I remember just how frustrated LeBron looked when the Cavs lost to the Magic. If they fail this year to win…

In his announcement Lebron made clear that his expectations are that a title is not a guarantee. In fact everything I’ve heard from him over the years has emphasized just how hard and precious it is just to get to the finals. For a player of his stature, every year is pressure filled. Every year fans and media expect him to win the title, no matter what team he’s on. He lasted many seasons not winning a title in Cleveland, since then he’s grown in leaps and bounds, proving his mettle as a winner capable of rising above the rest of the playing field and winning titles. A title in Cleveland would be much more meaningful to him. It is dead-on the most logical choice for a competitor at the very top of his game.

Don’t the best athletes want the biggest challenge? What challenge was there left in Miami? It certainly wasn’t any bigger than the one he now has in his home state.

On a disturbing note, returning to fans who despised you and an owner who crushed you, all for doing nothing wrong, is sad.

I don’t see why this needs mentioning while Cleveland is celebrating the return of Lebron. Yes, the hate was poured on hard when he left. But this is the emotion so similar to ones you may experience in a family. They are so passionate because it is like family. And just like with families, not all emotions that are expressed are indicative of how much parties mean to each other. And reunions are not strange, but expected and welcomed, and they deepen the bonds.

David Blatt, welcome to the hottest seat in sports. Maccabi Tel Aviv is a pressure filled place, but nothing like what he is going to face.

The first year coach will have some pressure, but is it true that the team will have championship expectations? I think the fan base will be ecstatic just to have the best player in the world back in the fold, putting all his effort in. We’ve seen the Spurs at the top of their game. Nobody questioned that they were the best team this year. There was no finger pointing that the Heat underachieved. They just played a better team. And frankly, there are going to be 4-5 teams in that elite tier that all have the same pressure of feeling that burning desire to win, because they know they can do it. Cleveland won’t be unique, if anything, the pressure will be less than with the Heat during the first 2 years.

If Bron cares more about returning home than he does his legacy as a champion, it would shock me.But it would not make him any less a player

This statement totally confounds me. It makes total nonsense. His legacy as a champion has a much higher ceiling in Cleveland. Winning a title there will mean more than any of his other titles. He’s taking the path with the higher ceiling. Even if he fails to win another title, nobody can fault him from taking on the challenge. Another title in Miami would have been nice, but not as significant. To paraphrase the words of Chris Bosh, in Miami winning was like a relief rather than a truly satisfying experience.

The Heat marriage always seemed to me like one of convenience. He paired up with some very talented friends and worked with an experienced, top notch organisation. He got what he was looking for. But what he left was a passionate fan base and the home state he felt deeply about. Winning for the Heat fan base is a totally different thing. They feel lucky to have Lebron and so they should be. But the larger portion of the fan base is not as crazy about their team as some other states are. Let’s face it. He had created the perfect conditions for success. A really strong coach, team president and roster while taking advantage of an easier path to the Finals by continuing to come out in the East. Goals were accomplished. A more meaningful challenge awaits.

On paper, just looking at rosters, Miami was already slipping behind the growing quality of elite teams in the West. They weren’t going to be as good as the roster they had during Lebron’s first successful title run. That roster had run its course. Battier is done, UD is done as a thriving role player. The point guard position was a dead end. Wade is never going to be an 82 game a year player again. He couldn’t do it even during the best of conditions. He’s not going to become a 3pt shooter overnight either. They weren’t going to attract high caliber free agents as fortuitously happened in the past either. What fun was there to be had in sticking with the Heat? How rewarding was it going to be anyway? Where the Heat fan base really going to cherish his effort during all the challenges the Heat would face if they didn’t pull together a better roster? Especially if you’ve already achieved what you set out to do.

So David, I love your commentary, in fact I think I’ve seen every one of your TrueHoop appearances this past year and loved all of them, but you were so wrong about Lebron.

PS. I’ve always rooted against Lebron and his team as a fan, but this turn of events has potentially changed that around, and I’m excited to see the new narrative unfold.

An Exploration Of Website Layout Patterns

A blog commenter I came across recently was praising the merits of sticking to the tried and tested layout of a header, title, post content with a sidebar on the left or right and a footer at the bottom. It was a commentary on the complex layout options found in bulky commercial themes and the flexibility marketed in the various page builder plugins. Sticking to a basic layout is simple and it works but also a bit dull. Truth is, most of the popular sites have very unique layout patterns.

Currently I’m working on a theme framework for my WordPress projects and I was looking for a good system to support a large variety of layout use cases. So I went to do a bit of research and explored a sampling of popular sites and attempted to note down broad layout patterns in varying detail.

I looked at sites in a wide browser window, just to maximize the layout possibilities. What struck me was that there’s quite a variety of layouts. Optimal layout has a lot to do with the type of content on offer and so it’s interesting to see the different approaches. There are some interesting trends finding their way into these high traffic sites. Grids are very popular across the board, some sites make decent use of infinite scrolling (pinterest), linear layouts without sidebars have become very popular too (see Paypal’s new home page). Content heavy sites still make heavy use of sidebars, but the way they are implemented is quite diverse. Also interesting is seeing sites utilize a separate sidebar starting at the comments section under an article (SBNation and Techcrunch do that).

I decided to share some notes I took below. It’s not meant to be exhaustive or completely accurate, just an impression really. Thought I might as well publish it as a quasi-interesting work note.

layout-variations-on-the-web