We’ve come a long way, baby.
The 2015 WordPress.com Year In Review!
Lotsa words pressed in 2015! So excited to be part of this!
Here’s an incredible fact: together, you published more than 660 million posts on WordPress.com in 2015, and made more than 655 million comments.
View original post 2,009 more words
AdControl Plugin Is Here!
The AdControl plugin for self-hosted WordPress sites I’ve been working on for the past while has finally launched! Piggybacking off Jetpack and WordAds 2.0 it’s now easier than ever to start showing ads on your site!
WordAds has been a hit with WordPress.com publishers and WordPress VIPs who further embraced it after we launched WordAds 2.0. Today we are excited to announce that WordAds is available to any WordPress site via the AdControl plugin.
Built specifically for WordPress sites that want to earn income from advertising, WordAds is built for simplicity, allowing bloggers to focus on blogging and leave the monetization to your WordAds partner.
If you have a self-hosted WordPress.org sites there are four steps to get going with Wordads:
- Apply here at WordAds.co.
- Download and install the AdControl plugin here.
- Make sure that the Jetpack plugin is installed.
- Complete setup questions in your WordPress dashboard under Settings > WordAds
More questions? Check the WordAds FAQ here.
Spreadsheet Column to Index Conversion in Python
If you’ve ever had to dig down into specific columns of a spreadsheet with > Z columns you probably know how annoying it is to try to convert something like ‘AQ’ to the appropriate index (e.g. row[42]). Here’s a quick one-liner to convert a spreadsheet letter-based column to the equivalent zero-based index.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
col2num = lambda col: reduce(lambda x, y: x*26 + y, [ord(c.upper()) – ord('A') + 1 for c in col])-1 |
For example:
-
col2num(‘A’) -> 0
-
col2num(‘Z’) -> 25
-
col2num(‘BC’) -> 54
Using the WordPress Media Loader in the Front-End
Over a year ago I was checking out WordPress’ new JavaScript media uploader interface and I had the idea to try to get it working on the front-end. After playing around with it I managed to get something working and thought, “I should write a blog post about that,” and promptly forgot all about it. Since I’m at Loopconf at the moment and feeling inspired I guess it’s finally time 🙂
I created a simple plugin available at https://github.com/dbspringer/wp-frontend-media to demonstrate what you’ll need to do to get it working. There are some important caveats!
- You need to decide how you want to handle how it’ll work for users that aren’t logged in.
- You’ll also have to decide what to do about users without ‘upload_files’ permissions.
That said, let’s take a look!
The Plugin
The media interface is all JavaScript so the plugin mostly serves as a way to bootstrap the js libraries we’ll need. I also included a simple shortcode that spits out a button that summons the interface and replaces the button with the selected image. Otherwise, there are three important things happening:
- I’m calling
wp_enqueue_media()
to load the media interface libraries. - I’m filtering
ajax_query_attachments_args
infilter_media()
to retrieve only the images belonging to the user. If you don’t care about restricting the images just remove the filter. - I’m checking
current_user_can( 'upload_files' )
in the shortcode to restrict access to the interface, you’ll need a similar check somewhere in your own code.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
/** | |
* Plugin Name: Front-end Media Example | |
* Plugin URI: https://derekspringer.wordpress.com | |
* Description: An example of adding the media loader on the front-end. | |
* Version: 0.1 | |
* Author: Derek Springer | |
* Author URI: https://derekspringer.wordpress.com | |
* License: GPL-2.0+ | |
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt | |
* Text Domain: frontend-media | |
* Domain Path: /languages | |
*/ | |
// If this file is called directly, abort. | |
if ( ! defined( 'WPINC' ) ) { | |
die; | |
} | |
/** | |
* Class wrapper for Front End Media example | |
*/ | |
class Front_End_Media { | |
/** | |
* A simple call to init when constructed | |
*/ | |
function __construct() { | |
add_action( 'init', array( $this, 'init' ) ); | |
} | |
function init() { | |
load_plugin_textdomain( | |
'frontend-media', | |
false, | |
dirname( plugin_basename( __FILE__ ) ) . '/languages/' ); | |
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) ); | |
add_filter( 'ajax_query_attachments_args', array( $this, 'filter_media' ) ); | |
add_shortcode( 'frontend-button', array( $this, 'frontend_shortcode' ) ); | |
} | |
/** | |
* Call wp_enqueue_media() to load up all the scripts we need for media uploader | |
*/ | |
function enqueue_scripts() { | |
wp_enqueue_media(); | |
wp_enqueue_script( | |
'some-script', | |
plugins_url( '/', __FILE__ ) . 'js/frontend.js', | |
array( 'jquery' ), | |
'2015-05-07' | |
); | |
} | |
/** | |
* This filter insures users only see their own media | |
*/ | |
function filter_media( $query ) { | |
// admins get to see everything | |
if ( ! current_user_can( 'manage_options' ) ) | |
$query['author'] = get_current_user_id(); | |
return $query; | |
} | |
function frontend_shortcode( $args ) { | |
// check if user can upload files | |
if ( current_user_can( 'upload_files' ) ) { | |
$str = __( 'Select File', 'frontend-media' ); | |
return '<input id="frontend-button" type="button" value="' . $str . '" class="button" style="position: relative; z-index: 1;"><img id="frontend-image" />'; | |
} | |
return __( 'Please Login To Upload', 'frontend-media' ); | |
} | |
} | |
new Front_End_Media(); |
The JavaScript
This is the meat of what you’ll need to use the media interface on the front-end. It’s actually pretty simple to summon the interface and then do something with the file that was retrieved. It’s all handled in these three easy steps:
- Create the file_frame object using
wp.media()
. - Attach a
'select'
listener to thefile_frame
object to handle what you want to do when a file is selected. Theattachment
variable will have an object containing all the metadata for the selected item. Just do aconsole.log()
to figure out what you’re getting. - Tell the
file_frame
to pop open the interface based on a click (or whatever) on an element somewhere.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function($) { | |
$(document).ready( function() { | |
var file_frame; // variable for the wp.media file_frame | |
// attach a click event (or whatever you want) to some element on your page | |
$( '#frontend-button' ).on( 'click', function( event ) { | |
event.preventDefault(); | |
// if the file_frame has already been created, just reuse it | |
if ( file_frame ) { | |
file_frame.open(); | |
return; | |
} | |
file_frame = wp.media.frames.file_frame = wp.media({ | |
title: $( this ).data( 'uploader_title' ), | |
button: { | |
text: $( this ).data( 'uploader_button_text' ), | |
}, | |
multiple: false // set this to true for multiple file selection | |
}); | |
file_frame.on( 'select', function() { | |
attachment = file_frame.state().get('selection').first().toJSON(); | |
// do something with the file here | |
$( '#frontend-button' ).hide(); | |
$( '#frontend-image' ).attr('src', attachment.url); | |
}); | |
file_frame.open(); | |
}); | |
}); | |
})(jQuery); |
There you have it! I’ll leave it up to you to do something non-trivial with it, but this should get you started. happy coding!
Movember
As the tweet below proclaims, I’m participating in Movember this year with my teammates at Automattic. If you want to help a bro with his mo please use the tweet below or you can donate directly to the team at moteam.co/automattic.
WCLAX Video: Good to Great
The video of my presentation at WordCamp Los Angeles 2014: Good to Great: Easy Tips to Improve Your Blog.
SpaceFacts™
My Flash Talk on space for the 2014 Automattic Grand Meetup in Park City, Utah.
Good to Great: Easy Tips to Improve Your Blog
My presentation from WordCamp Los Angeles 2014 on improving your blog with WordPress.
Welcome to the future!
Posting this from my new company sponsored iPad mini with Retina. Word on the street is that this–personal tablet computing–is the future of computing, but I’m not convinced. It’s great and all to have a (kinda) full featured computing device with you at all times, but I constantly find myself wishing I could just get back to my laptop and do the same task in 1/4th the time. For instance, as soon as I finish posting this I plan on heading to my computer and adding images and whatnot because doing so from the iPad is an obtuse nightmare.
This whole experience reminds me of those scenes in 2002 movie rendition of Minority report where Tom Cruise’s character interacts with some fancy-pants gesture based interface. It looked so awesome, but the reality is that efficiency tests showed that plain ol’ mouse and keyboard beat the fancy gesture interfaces by an order of magnitude. I guess you can lump me in with the old technology grump-a-grumps lamenting the passing of simpler times, but why add complexity to something that already simply works?
Edit: I ended up finishing this post in my laptop 😛