Support Documentation Updates

This is the third in a series of periodic posts where we will highlight new support documentation and/or any changes made to existing docs. This is a great way to stay up-to-date with the latest VIP coding standards. Here are the latest updates:

1. Code Review: What We Look For

Addition to: Using rawurlencode() on the values passed to it prevents this.

Using rawurlencode on any variable used as part a the query string, either by using add_query_arg() or directly will also prevent parameter hijacking.

Clarification to: Encoding values used when creating a url or passed to add_query_arg():

Encoding values used when creating a url or passed to add_query_arg()

Using rawurlencode on any variable used as part a the query string, either by using add_query_arg() or directly by string concatenation will also prevent parameter hijacking.

Clarification to: Check for is_array(), !empty() or is_wp_error()

Here are some common functions / language constructs that are used without checking the parameters before hand:

foreach(), array_merge(), array_filter(), array_map(), array_unique(), wp_list_pluck()
Always check the values passed as parameters or cast the value as an array before using them.

2) Uncached Functions

Additions:

– get_pages(): As with get_posts(), WP_Query should be used instead.
– get_next_post(), previous_post_link(), next_post_link()
– url_to_post_id() And url_to_post_id()

Clarification:

wp_get_object_terms(): Use get_the_terms() along with wp_list_pluck to extract the IDs or use the equivalent get_the_* version instead (e.g. get_the_category()

3) Security Overview

New addition: Secure Access and Users

4) Creating Cache Groups with vary_cache_on_function

New addition: Common Example

5) New Plugin WP-SEO:

WP SEO is designed for professionals who want to build a solid foundation for an SEO-friendly website.

It allows you to create templates for the title tag, meta description, and meta keywords on your posts, pages, custom post types, archives, and more. The templates can be populated dynamically with built-in formatting tags like #title# or #author_name#. You can even allow authors to create custom title and meta values for individual entries.

If there are any questions about the updates above, please feel free to reach out!

Support Documentation Updates

This is the second in a series of periodic posts where we will highlight new support documentation and/or any changes made to existing docs. This is a great way to stay up-to-date with the latest VIP coding standards. Here are the latest updates:

VIP Quickstart

New additions to the page:

  • In order to use a custom theme in VIP Quickstart, move a valid WordPress theme folder into this directory:
    • ../vip-quickstart/www/wp-content/themes/vip/
  • Once the theme is in the correct directory, you can “Network Enable” it from this page: http://vip.local/wp-admin/network/themes.php
    • From there you should be able to activate it on individual sites.

Batcache

New addition to the page:

  • The caching is introduced after the same page has been requested at least 4 times in 5 minutes.

Code Review: What We Look For

New additions to the page:

  • Commented out code
    • The use of commented out code should be avoided. Having code that is not ready for production on production is bad practice and could easily lead to mistakes while reviewing (since the commented out code might not of been reviewed and the removing on a comment might slip in accidently).
  • Skipping Batcache
    • Requests that prevent Batcache from caching the page like using $_GET params (e.g. ?abc=def) are not allowed, as they will likely make your site go down. You can use one of the whitelisted params that do not bypass batcache from this list: ‘hpt’, ‘eref’, ‘iref’, ‘fbid’, ‘om_rid’, ‘utm’, ‘utm_source’, ‘utm_content’, ‘utm_medium’, ‘utm_campaign’, ‘utm_term’, ‘utm_affiliate’, ‘utm_subid’, ‘utm_keyword’, ‘fb_xd_bust’, ‘fb_xd_fragment’, ‘npt’, ‘module’, ‘iid’, ‘cid’, ‘icid’, ‘ncid’, ‘snapid’, ‘_’, ‘fb_ref’, ‘fb_source’, ‘_ga’,’hootPostID’ if you want to handle the query data in Javascript. More information.
  • Order by Rand

Uncached Functions

New addition to the page:

  • attachment_url_to_postid()
    Use wpcom_vip_attachment_url_to_postid()
     instead.

VIP Search Add on

New additions to the page:

  • Include custom post types
    • To include your custom post types in searches performed by Elasticsearch, you need to include them in your Elasticsearch index. See this documentation for how to do that.
  • Development site Elasticsearch checklist:
    1. Connected to Jetpack (has a WordPress.com site ID)
    2. The Jetpack::get_option( ’public’ ) must return true
    3. Custom post types need to be added — see this documentation for how to do that.

A Visual Guide to Getting Started

  • Our step-by-step process to successful site launches

This concludes the updates for the month of October.

Support Documentation Updates

Hello there! This is the first in a series of periodic posts where we will highlight new support documentation and/or any changes made to existing docs. This would be a great way to stay up-to-date with the latest VIP coding standards.

New Update to “The WordPress API”:

  • WordPress.com REST API
    • All WordPress.com sites, including VIP sites, feature the WordPress.com REST API. The VIP site theme now loads for a REST API request on your sites data, which means custom post types, custom taxonomies, and custom user roles are there.

New Updates to “Code Review: What We Look For”:

  • Not defining post_status Or post_type:
    • By default the post_status of a query is set to publish for anonymous users on the front end. It is not set in any WP_ADMIN context including Ajax queries. Queries on the front end for logged in users will also contain an OR statement for private posts created by the logged in user, even if that user is not part of the site. This will reduce the effectiveness of MySQL indexes, specifically the type_status_date index.
    • The same is true for post_type, if you know that only a certain post_type will match the rest of the query (for example for a taxonomy, meta or just general query) adding the post_type as well as the post_status will help MySQL better utilize the indexes as it’s disposal.
  • Including files with untrusted paths or filenames:
    • locate_template(), get_template_part() and sometimes include() or require() are typically used to include templates. If your template name, file name or path contains any non-static data or can be filtered, you must validate it against directory traversal using validate_file() or by detecting the string “..”
  • Settings Alteration
    • Using ini_set() for alternating PHP settings, as well as other functions with ability to change configuration at runtime of your scripts, such as error_reporting(), is prohibited on the WordPress.com VIP platform. Allowed error reporting in production can lead to Full Path Disclosure.

Security Best Practices Update

  • Preventing XSS in JavaScript
    • To avoid XSS, avoid inserting HTML directly into the document and instead, programmatically create DOM nodes and append them to the DOM. This means avoiding.html(), .innerHTML, and other related functions, and instead using .append(), .prepend(),.before(), .after(), and so on.

What does VIP look for during Code Review?

Every line of code that is committed to WordPress.com VIP is reviewed by the VIP Team. We do this to ensure that your code is secure, optimized, and well-architected, and hope that our feedback will help you become a better WordPress developer.

We’ve heard from our clients that it would be helpful if we shared our internal list of items that we look for during code review. So, our team got together and created a document to help you better prepare and check your code before submission, which in turn expedites the review process. Here it is:

Code Review: What We Look For

Take a look, and let us know if you have any suggestions or feedback! This is a living list and we will be adding and modifying the document as we continue to refine our processes and platform.

New Documentation For Helper Functions

We’re happy to announce the launch of new documentation for all 135 of our Helper Functions.

You’ve probably seen us mention in tickets and code reviews that functions like get_page_by_title and get_term_by aren’t cached by WordPress and scale poorly, and we help out by suggesting another version of the function that resolves the problem is. These pre-existing resources are our Helper Functions!

For those examples, our helpers are wpcom_vip_get_page_by_title and wpcom_vip_get_term_by. Other helpers also let you tweak the WordPress.com environment for your site where there are differences between VIP and your dev environments for things such as managing user roles and capabilities, and querying ElasticSearch, amongst others.

The new web-based documentation makes it super easy to discover new Helper Functions, and also lets you quickly refresh your memory on parameter order without having to dive into the code. Similar documentation for classes within our Helper Functions will be available soon.

Want to see all our Helper Functions? Check out the Helper Function index.

Implementing HiDPI, 2x, Retina images

HiDPI displays are the future, so it’s a good idea to include 2x images in themes and admin area modifications going forward. It’s actually really easy to do, and will only get easier as more browsers and operating systems begin to support it.

At the time of this writing, the audience is limited mostly to Safari 6 and Chrome Canary 21 on a Retina Macbook Pro, or Safari on a Retina iPad/iPhone, but that’s no excuse to not be thinking ahead. We’ve already updated much of the WordPress.com and VIP admin areas, and WordPress core icons are quickly being updated also.

For now, the following approach works really well. It applies only the CSS rules it needs, without duplicating too much effort.

#your-image {
    background-image: url('/path/to/image.jpg');
    background-position: XPOSpx YPOSpx;
    background-repeat: no-repeat;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
    #your-image {
        background-image: url('/path/to/image-2x.jpg');
        background-size: 1xWIDTHpx 1xHEIGHTpx;
    }
}

The first bit sets the 1x background image, position, and forces no-repeat (which you may or may-not need.) The second bit only applies to a pixel-ratio of 1.5 or greater, switches the image to a 2x variant, and sets the background-size to the 1x images height and width. These rules are what allow the image to scale down if need-be.

The only caveat to this approach is the end-user downloading both the 1x and 2x images. Short term, we might have a cookie available to identify the device’s pixel ratio. This only helps inline images (or ones loaded via PHP) and not ones loaded via CSS. Long term, browser support will improve and no hacks will be necessary.

If you need help identifying non-2x images, check out this page in the Mac Development Library. OS X comes with a flag to make all non-2x images show up in an annoying pink hue. It’s really annoying, which is great motivation to update things. Normal 1x scaled images are already pretty annoying, so I haven’t used it in day-to-day retina’izing. That said, it’s a great tool if you want to audit images without looking at the file system and going down the list.

Speaking of the file system, it’s a great idea to crunch the 2x images as much as possible to keep their file-sizes down. Adobe apps make this really easy with the Save for Web option, which you should already be familiar with.

One final tip for the designers and illustrators. Images that are specifically designed with 2x in mind are what will really make your sites and admin area modifications look polished and refined. Simply resizing an image or using a doubled-up version will yield the same ugly results as trying to make a 16px favicon out of a 128px PNG. In other words, make sure to design themes with twice the dimensions of a normal site, so your images are already 2x ready.

That about wraps this up. No doubt we’ll need to revise this as technologies and approaches change. Let us know if something better comes along, and we’re happy to include it here.

Using WP-CLI for Your Bin Scripts

At one point or another, you might need to write a bin script to transform data on your WordPress.com site. Having received bin scripts of many shapes and sizes, we’ve decided to adopt WP-CLI as our preferred framework for bin scripts. It’s fully featured, has good traction within the community and, most importantly, will save you time and effort.

Check out our new documentation for more details. If there’s sufficient interest, I’d be happy to do an introductory webinar in the first or second week of August. Let me know in the comments.

Using Twitter with WordPress.com

With the recent announcement about the new Tweet button launching last week (it is available to every VIP site via Appearance > Extras), we wanted to make sure you know about all the ways you can integrate Twitter with your site and its content.

Read Twitter and WordPress.com for more information about pushing out your content updates to integrating your Twitter updates in your site’s layout to enabling your users with a quick way to Tweet your site’s content.

Second Week of July

We, Automattic, have a new service VaultPress in private beta for self-hosted WordPress sites.

We already have a tested, comprehensive backup and recovery strategy in place for WordPress.com VIP Hosting partners, but are in the loop and on the look out for any new insights that come out of our VaultPress offering.

If your organization has self-hosted WordPress sites, and would like to check out VaultPress, please sign up. Let us know, and we should be able to get your ticket pulled.

Doc Updates

Just a couple of doc updates this week, as we focused on moving your info to a custom WordPress based CRM.

First Week of July

WordPress.com introduced an audio post by phone feature. We’d love to hear what your bloggers think of it, and how they make use of it.

Here in the VIP Lobby we saw a few updates under “Custom Made” (Tips & Tricks):