Customizer Control: Arbitrary HTML

Sometimes it’s really useful to be able to output HTML in the Customizer that’s not a label or description for a specific control. You may want to output a line break, an image, a button, or simply some additional text.

There isn’t a native Customizer control in WordPress to do this, but you can add your own custom control to output arbitrary HTML. This was a request for the Customizer Library, and the GitHub issue explains the thought process behind the code. Continue reading

Barriers to Entry

person-woman-apple-hotel

Broad Experience is a podcast I listen to regularly. It’s a thoughtful interview show about the experience of women in the workplace.

One recent episode mentioned the lack of women in tech, which hits close to home (87% of of people who follow me on Twitter are male). It’s a complex issue and there’s no quick panacea, but there is at least one easy step companies can take recruit more female engineers: remove requirements from a job description that aren’t actually requirements.

“There’s been research that shows many women will only apply for a job if they meet 100% of the qualifications,” said Erik Michaels-Ober of Soundcloud. “Whereas men will do so even if they meet some smaller percentage. They’re willing to put themselves out there even if they’re not fully qualified.”

“So we looked at a lot of things,” said Erik. “For example, having a college degree was a requirement on a lot of our jobs. But when we looked internally, we realized had hired a lot of male engineers who didn’t have a college degree because they had decided to apply anyway.” Continue reading

Custom Links in the Customizer

custom-upsell

Adding custom links or markup to the theme customizer can be a bit difficult since everything is injected with javascript rather than the normal PHP toolkit. However, there are a number of use scenarios where this might be useful.

One common use case for theme authors might be to add a documentation link or an upsell link so users can find out about theme features.

The approach I like the best is one I first saw employed by the Theme Foundry with their theme “Make”. Their upsell link is prominent, but it doesn’t detract too much from the theme customization experience or take up too much space in the limited UI.

make-upsell

This tutorial takes a similar approach, but shows how to add a styled link to the “Active Theme” section. Continue reading

Theme Repository Data

themerepository

Aaron Jorbin just released a script called the “WordPress Theme Directory Slurper“, a command line PHP script which downloads the latest stable version of every theme in the WordPress.org theme repository. You can find more information about it in the GitHub repository.

I had a number of questions about the themes on WordPress.org, so I ran the script this morning a slurped all the themes. It took 112 minutes to run and downloaded nearly 4GB of theme code. Here’s what I found out. Continue reading

Add a Page Select to the Customizer

I’ve been working on a new theme that allows users to select certain pages in the customizer, and then display those pages out on a “showcase” template. I think this is pretty useful functionality and wanted to share how I implemented it.

Add Settings, Controls and Sanitization

First, we’ll need to the page select boxes to the customizer. In the code below, I add a new customizer section called “Showcase”. Then, I loop through the add_setting / add_control functionality in order to display four distinct page select boxes.

I’ve also created a function called “prefix_get_pages_array” which returns an array of all the pages to be used both by the controls and the sanitization function. You’ll notice it sorts the pages alphabetically, and indents sub-pages slightly with an em dash when output in the select box. Continue reading

Link to Customizer Sections

One neat “feature” introduced in WordPress 4.1 was the removal of the background and header admin screens in favor of the customizer (see ticket). Now if you click to customize one of those items, it links directly to the customizer and opens the appropriate panel.

If your plugin or theme adds customizer options, you can also link to those. Just use:

admin_url( 'customize.php?autofocus[control]=control-name' )

Replace “control-name” with the name of the control you’d like to link to. Continue reading

Faster Image Loading with Jetpack & Photon

Photon is a JetPack module that enables your images to be resized and loaded using WordPress.com’s servers. This can can speed up the loading of images for several reasons:

  • Photon utilizes multiple levels of caching, including a globally distributed CDN to make sure images are served as fast as possible.
  • Lossless compression. All images are losslessly compressed using either OptiPNG or jpegoptim.
  • Photon takes advantage of parallel downloads by using multiple sub-domains to load images.
  • Images are resized if they exceed the max $content_width set for theme.

Read more in the Photon Developer Docs.

Adjust Image Quality

However, you might be able to squeeze your image sizes even further by using the Photon filters to adjust the quality. Instead of loading images at full quality, you could try 80%. Continue reading